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

1、::-Webkit-Input-Placeholder

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

::-webkit-input-placeholder { /* Chrome/Opera/Safari */

  color: red;

}

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

  color: red;

}

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

  color: red;

}

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

  color: red;

}

2、Outline

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

div {

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

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

}

3、Webkit-Playsinline

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

<video id="myvideo" src="test.mp4" webkit-playsinline="true"></video>

4、Css实现文本的各种换行状态

//不换行

white-space:nowrap;

//自动换行

word-wrap: break-word;

word-break: normal;

//强制换行

word-break:break-all;

5、Calc() Function

这个标签的好处就是让系统去计算，不用自己在计算

div {

    width: calc(100% - 100px);

}

项目设计组   供稿