一、解决 img 5px 间距的问题
方案1：设置父元素字体大小为 0
.img-container{
font-size: 0;
}
方案2：将 img 元素设置为 display: block
img{
display: block;
}
方案3：将 img 元素设置为 vertical-align: bottom
img{
vertical-align: bottom;
}
解决方案4：给父元素设置 line-height: 5px
.img-container{
line-height: 5px;
}
二、将一个容器设为透明
.wrap {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
三、消除transition闪屏
.wrap {
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
}
四、识别字符串里的 '\n' 并换行
一般在富文本中返回换行符不是
的标签，而且\n。不使用正则转换的情况下，可通过下面样式实现换行。
body {
white-space: pre-line;
}
五、元素的高度与 window 的高度相同
height: 100vh;
六、使用 "filter:grayscale(1)"，使页面处于灰色模式。
body{
filter: grayscale(1);
}
七、页面动画出现闪烁问题
在 Chrome and Safari中，当我们使用CSS transforms 或者 animations时可能会有页面闪烁的效果，下面的代码可以修复此情况：
.cube {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
perspective: 1000; /* Other transform properties here */
}
在webkit内核的浏览器中，另一个行之有效的方法是
.cube {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
/* Other transform properties here */
}
八、修改 input placeholder 样式
.placehoder-custom::-webkit-input-placeholder {
color: #babbc1;
font-size: 12px;
}
九、使用 :not 选择器
li:not(:last-child) {
border-bottom: 1px solid #ebedf0;
}
十、css 选取第 n 个标签元素
first-child first-child 表示选择列表中的第一个标签。
last-child last-child 表示选择列表中的最后一个标签
nth-child(3) 表示选择列表中的第 3 个标签
nth-child(2n) 这个表示选择列表中的偶数标签
nth-child(2n-1) 这个表示选择列表中的奇数标签
nth-child(n+3) 这个表示选择列表中的标签从第 3 个开始到最后。
nth-child(-n+3) 这个表示选择列表中的标签从 0 到 3，即小于 3 的标签。
nth-last-child(3) 这个表示选择列表中的倒数第 3 个标签。
十一、使用 caret-color 来修改光标的颜色
caret-color: #ffd476;
十二、删除 type="number" 末尾的箭头
.no-arrow::-webkit-outer-spin-button,
.no-arrow::-webkit-inner-spin-button {
-webkit-appearance: none;
}
十三、解决iOS滚动条被卡住的问题
body,html{
-webkit-overflow-scrolling: touch;
}
十四、设置滚动条样式
.test::-webkit-scrollbar{
/*滚动条整体样式*/
width : 10px; /*高宽分别对应横竖滚动条的尺寸*/
height: 1px;
}
.test::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius : 10px;
background-color: skyblue;
background-image:
-webkit-linear-gradient(
45deg,
rgba(255, 255, 255, 0.2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.2) 75%,
transparent 75%,
transparent
);
}
.test::-webkit-scrollbar-track {
/*滚动条里面轨道*/
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: #ededed;
border-radius: 10px;
}
十五、CSS实现文本两端对齐
.wrap {
text-align: justify;
text-justify: distribute-all-lines; //ie6-8
text-align-last: justify; //一个块或行的最后一行对齐方式
-moz-text-align-last: justify;
-webkit-text-align-last: justify;
}
十六、实现文字竖向排版
// 单列展示时
.wrap {
width: 25px;
line-height: 18px;
height: auto;
font-size: 12px;
padding: 8px 5px;
word-wrap: break-word;/*英文的时候需要加上这句，自动换行*/
}
// 多列展示时
.wrap {
height: 210px;
line-height: 30px;
text-align: justify;
writing-mode: vertical-lr; //从左向右
writing-mode: tb-lr; //IE从左向右
//writing-mode: vertical-rl; -- 从右向左
//writing-mode: tb-rl; -- 从右向左
}
十七、禁止用户选择
.wrap {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
十八、自定义选定的文本样式
.box-custom::selection {
color: #ffffff;
background-color: #ff4c9f;
}
十九、不允许选择文本
.box p:last-child {
user-select: none;
}
二十、单行文本溢出时显示省略号
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 375px;
二十一、多行文本溢出时显示省略号
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
/* set n lines, including 1 */
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
二十二、首字下沉
p:first-letter {
font-size: 3rem;
}
二十三、给文字添加渐变
p {
font-size: 48px;
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
二十四、中英文自动换行
word-break:break-all;只对英文起作用，以字母作为换行依据
word-wrap:break-word; 只对英文起作用，以单词作为换行依据
white-space:pre-wrap; 只对中文起作用，强制换行
white-space:nowrap; 强制不换行，都起作用
p{
word-wrap: break-word; white-space: normal; word-break: break-all;
}
//不换行
.wrap {
white-space:nowrap;
}
//自动换行
.wrap {
word-wrap: break-word; word-break: normal;
}
//强制换行
.wrap {
word-break:break-all;
}
二十五、文字阴影
h1{
text-shadow: 5px 5px 5px #FF0000;
}
二十六、字母大小写转换
p {text-transform: uppercase} // 将所有字母变成大写字母
p {text-transform: lowercase} // 将所有字母变成小写字母
p {text-transform: capitalize} // 首字母大写
p {font-variant: small-caps} // 将字体变成小型的大写字母
二十七、CSS实现文字模糊效果
.vague_text{
color: transparent;
text-shadow: #111 0 0 5px;
}
二十八、移除a标签被点链接的边框
a {
outline: none；//或者outline: 0
text-decoration:none; //取消默认下划线
}
二十九、select内容居中显示、下拉内容右对齐
select{
text-align: center;
text-align-last: center;
}
select option {
direction: rtl;
}
三十、使用 SVG 遮罩图像
<svg>
<clippath id='clippath'>/* Enter your svg here*/</clippath>
</svg>
<style>
img:{
clip-path:url(#clippath)
}
</style>
三十一、图片自适应object-fit
当图片比例不固定时，想要让图片自适应，一般都会用background-size:cover/contain，但是这个只适用于背景图。css3中可使用object-fit属性来解决图片被拉伸或是被缩放的问题。使用的提前条件：图片的父级容器要有宽高。
img{
width: 100%;
height: 100%;
object-fit: cover;
}
fill: 默认值。内容拉伸填满整个content box, 不保证保持原有的比例。
contain: 保持原有尺寸比例。长度和高度中长的那条边跟容器大小一致，短的那条等比缩放，可能会有留白。
cover: 保持原有尺寸比例。宽度和高度中短的那条边跟容器大小一致，长的那条等比缩放。可能会有部分区域不可见。（常用）
none: 保持原有尺寸比例。同时保持替换内容原始尺寸大小。
scale-down:保持原有尺寸比例,如果容器尺寸大于图片内容尺寸，保持图片的原有尺寸，不会放大失真；容器尺寸小于图片内容尺寸，用法跟contain一样。
三十二、CSS加载动画
主要是通过css旋转动画的实现：
.dom{
-webkit-animation:circle 1s infinite linear;
}
@keyframes circle{
0%{ transform: rotate(0deg); }
100%{ transform: rotate(360deg); }
}
实现如下效果：
<div class="loader"></div>
<style>
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 80px;
height: 80px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
三十三、使用图像作为光标
h1{
cursor:url("custom.gif"), auto;
}
三十四、为列表标记设置样式
::marker{
color:#f548r9;
text-shadow:2px 2px black;
}
