css冷门 问题,分享一些冷门但却很实用的css样式

在平常的代码工作中，有很多冷门不常用的css样式标签。有些偏门、冷门的标签一般都记不住，想起来的时候就又会去现找，很影响工作效率，现在，把这些标签都统一整理一下用的少但是超级实用的css样式。

::-Webkit-Input-Placeholder

input 的 H5 placeholder 属性，很好用，可以直接定义输入文本框里面的内容，唯一的缺点就是不能更改默认显示字体的颜色，不过我们可以直接利用::input-placeholder这个属性来设置字体颜色。::-webkit-input-placeholder { /* Chrome/Opera/Safari */

color: pink;

}

::-moz-placeholder { /* Firefox 19+ */

color: pink;

}

:-ms-input-placeholder { /* IE 10+ */

color: pink;

}

:-moz-placeholder { /* Firefox 18- */

color: pink;

}

使用 clearfix 清楚浮动，解决父类高度崩塌.clearfix {

zoom: 1;

}

.clearfix:after {

visibility: hidden;

display: block;

font-size: 0;

content: " "; /* 内容为空 */

clear: both;

height: 0;

}

p::selection选中文本后的背景色p::selection {

background: rgb(188, 188, 188);

color: #ffffff;

}

calc() function, 计算属性值div {

width: calc(100% - 100px);

}

outline属性值

不知道大家有没有一个困扰，就是在写input的时候，点击的时候总会有一个很丑的蓝色描边，但是找代码还找不到。这个其实很简单，用outline这个标签就可以很简单的解决掉这个烦人的问题。div {

outline: none; //移动浏览器默认的状态线

// outline: 5px dotted red; 也可以设置样式

}

Webkit-Playsinline

支持vedio视频在手机页面内部播放，不用全屏

Css实现文本的各种换行状态//不换行

white-space:nowrap;

//自动换行

word-wrap: break-word;

word-break: normal;

//强制换行

word-break:break-all;

-webkit-line-clamp

可以把 块容器 中的内容限制为指定的行数。并且在超过行数后，在最后一行显示"..."  这是正常的展示display: -webkit-box; /*值必须为-webkit-box或者-webkit-inline-box*/

-webkit-box-orient: vertical; /*值必须为vertical*/

-webkit-line-clamp: 2; /*值为数字，表示一共显示几行*/

overflow: hidden;

caret-color

用来定义插入光标(caret)的颜色，这里说的插入光标，就是那个在网页的可编辑器区域内，用来指示用户的输入具体会插入到哪里的那个一闪一闪的形似竖杠 | 的东西。caret-color: red;

暂时就记录这么多，后续将持续更新，是不是很实用，很多css样式在宁静致远、锦鲤、梦想家及博览主题都有用到，您发现了么？