总结一些较偏但实用的CSS样式

业余时间总结一些较偏但是很实用的CSS样式（项目中经常用到），以便下次遇到直接拿来使用：

(1)：防止页面加载时出现 vuejs 的变量名：

v-cloak

当页面加载的时候从后台获取到数据进行渲染时，在渲染未完成可能会显示出变量名，这时候我们用v-cloak解决：

(2)：修改input的placeholder的样式：

::-webkit-input-placeholder{} /* 使用webkit内核的浏览器 */:-moz-placeholder{} /* Firefox版本4-18 */::-moz-placeholder{} /* Firefox版本19+ */:-ms-input-placeholder{} /* IE浏览器 */

(3)：修改放在input的光标颜色以及聚焦时的边框：

input:focus {} a,button,input {outline:none}

只修改光标颜色，不修改文字颜色

input {caret-color: red;color: #fff;}

(4)：禁止网页中的文字被选中：

body {-o-user-select: none;-moz-user-select: none; /*火狐 firefox*/-webkit-user-select: none; /*webkit浏览器*/-ms-user-select: none; /*IE10+*/-khtml-user-select :none; /*早期的浏览器*/user-select: none; }

(5)：清除手机Tap事件后Element 时候出现的一个高亮：

-webkit-tap-highlight-color: rgba(0,0,0,0);

(6)：CSS开启硬件加速：

-webkit-transform: translateZ(0);

(7)：使用CSS Transforms 或者 Animations时可能会有页面闪烁的Bug：

-webkit-backface-visibility: hidden;

(8)：Css实现不换行、自动换行、强制换行：

white-space:nowrap; //不换行

省略号：

p{overflow:hidden;texe-overflow:ellipsis;white-space:nowrap}

word-wrap: break-word; //自动换行 word-break: normal; //自动换行 word-break:break-all; //强制换行

(9)：Calc() Function, 计算属性值： 宽度100%减去100px：

div {width:calc(100% - 100px)}

(10)：Css3 Linear-Gradient 线性渐变： 默认从top开始，可以自定义方向：

(11)：常用的选择器 :Nth-Child()：

ul:nth-clild(1){margin-top:5px;}

(12)：设置字间距、单词间距：

letter-spacing:2px; //设置2px的字间距 word-spacing:2px; //设置2px的单词间距

(13)：禁止点击，鼠标样式改变：

cursor: not-allowed; // 鼠标禁止点击样式

(14)：3D景深，设置3D环境：

perspective: 100; transform-style:preserve-3d;

(15)：控制长度超过一行的单词是否被拆分换行

word-wrap: normal | break-word

(16)：控制单词如何被拆分换行

word-break: normal | break-all | keep-all

(17)：使HTML识别string里的 ‘\n’ 并且换行

body { white-space: pre-line; }

(18)：实现一个三角形

border-color: transparent transparent green transparent; border-style: solid; border-width: 0px 300px 300px 300px; height: 0px; width: 0px;

(19)：使用CSS显示链接之后的URL

a:after{content:" (" attr(href) ") ";}

(20)：select option 样式替换

select { text-align: center; text-align-last: center; } select option { irection: rtl; }

(21)：边框字体同色

.wrap {width: 200px;height: 200px;color: #000;font-size: 30px;border: 50px solid currentColor;// border: 50px solid; // 实现二}

(22)：大小写字母转换

p {text-transform: uppercase} // 将所有字母变成大写字母p {text-transform: lowercase} // 将所有字母变成小写字母p {text-transform: capitalize} // 首字母大写p {font-variant: small-caps} // 将字体变成小型的大写字母

(23)：cursor为pointer时，移动端会有蓝色背景

-webkit-tap-highlight-color: transparent

(24)：css实现倒影

.box {-webkit-box-reflect:below 10px -webkit-linear-gradient(transparent,transparent 50%,rgba(0,0,0,.8));} // 倒影在下边.box {-webkit-box-reflect:above 0 -webkit-linear-gradient(transparent,transparent 50%,rgba(0,0,0,.8));} // 倒影在上边.box {-webkit-box-reflect:left 1 -webkit-linear-gradient(transparent,transparent 50%,rgba(0,0,0,.8));} // 倒影在左边.box {-webkit-box-reflect:right -2px -webkit-linear-gradient(transparent,transparent 50%,rgba(0,0,0,.8));} // 倒影在右边

(25)：filter图像过滤

// 这里只说一种，图像模糊，其他类似图像置灰，图像亮度，图像对比度等等blur { -webkit-filter: blur(4px); filter: blur(4px);}

(26)：禁止鼠标点击C3

.btn { pointer-events: none; cursor: not-allowed;}

持续更新中…