CSS方言之webkit私有属性
前言
写这篇文章的起因来源于一个小bug，就是在一个p元素中，明明已经设置了text-align: center，文字却依然没有居中。仔细一看是由于设置了display: -webkit-box的缘故。
p {
text-align: center;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4;
}
看着熟悉而又陌生的-webkit前缀，进而想到chrome目前的市场占有率，我觉得还是有必要再过一遍-webkit类的css特性。前端在写css时浏览器兼容性固然重要，但是了解一下某种主流浏览器特有的奇技淫巧，对于解决特定问题还是很能开阔思路的。
display: -webkit-box 与display: flex的渊源
display:flex和display:box都是弹性布局，box是2009年的命名，已经过时，使用时要加上前缀(比如webkit)。flex是2012年之后的命名。
以上可以先得出一个结论， display: box不要用了，省的给自己挖坑。 flex完全可以满足需求且是最新标准。
但是问题既然遇到了，还是应该了解一下原因。其实也很简单，当元素设置为弹性盒子布局(box/flex)，一些css属性就失效了。
在指定flex之后，子元素的float、text-align、vertical-align属性都将失效。 可以理解为弹性盒子本身就是布局属性，设置后子元素的布局将由其接管，其他普通布局类css都靠边站。
webkit-box并非百无一用( -webkit-line-clamp )
-webkit-line-clamp ：限制在一个块元素显示的文本的行数。适用于多行文本显示省略号的问题。(单行文本使用text-overflow : ellipsis即可)
.multi-text {
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
}
效果图如下：
如果不用-webkit-line-clamp，大概可以用css hack或者用js实现，当然也可以使用插件，比如jQuery.dotdotdot。这样当然麻烦很多。
-webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。只有webkit内核浏览器支持这个属性，比如chrome，safari和opera.
在使用-webkit-line-clamp有两个非常重要的点就是：
- 兼容性
- 必须配合webkit-box使用，在我看来算是webkit-box的一点剩余价值：
display: -webkit-box; // 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient：// 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式
Webkit Extensions
WebKit支持大量的CSS扩展,这种css属性的前缀为-webkit-.
这些属性其中的一部分已经被包含在 CSS 规范草案中,并且可能成为最后的推荐标准,但目前仍然是试验性的属性, 还有一些属性是不规范的属性,它们没有出现在跟踪规范中.
具体细节可参照MDN：Webkit Extensions
有用的webkit私有css属性
- -webkit-mask
图片渐变：
background : url("images/image.png") no-repeat;
// 对角线渐变
-webkit-mask : -webkit-gradient(linear, left top, right bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
图片裁剪：
.homePage {
height: 300px;
width: 300px;
background: url(./img/index.png) 0 0 no-repeat;
-webkit-mask-image: url(./img/circle.svg);
-webkit-mask-size: 300px 300px;
}
2. -webkit-appearance：none | button | button-bevel …
我是span