CSS3部分属性
本文参考自：https://www.cnblogs.com/libin-1/p/5903350.html
WebKit特有属性
-webkit-mask
这个属性是相当强大的，所以详细的介绍超出了本文的范畴，它非常值得深入研究，因为它可以在实际应用中为你省掉很多时间。
-webkit-mask让为一个元素添加蒙板成为可能，从而你可以创建任意形状的花样。蒙板可以是CSS3渐变或者半透明的PNG图片。蒙板元素的alpha值为0的时候会覆盖下面的元素，为1的时候会完全显示下面的内容。相关的属性有-webkit-mask-clip、 -webkit-mask-position 和-webkit-mask-repeat等，严重依赖来自于background中的语法。更多信息请查看webkit的博客和下面的链接。
示例
图片蒙板:
1 2 3 4 | .element{
background: url(img/image.jpg) repeat;
-webkit-mask: url(img/mask.png);
} |
示例
渐变蒙板:
1 2 3 4 | .element2 {
background: url(img/image.jpg) repeat;
-webkit-mask: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
} |
扩展阅读: Safari Developer Library
-webkit-text-stroke
CSS边框的一个不足就是只有矩形的元素才能使用。-webkit-text-stroke可以为文字添加边框。它不但可以设置文字边框的宽度，也能设置其颜色。而且，配合使用color: transparent属性，你还可以创建镂空的字体！
示例
为所有的<h1>标题设定一个2px宽的蓝色边框:
1 | h1 {-webkit-text-stroke: 2px blue} |
另一个特性是，通过设定1px的透明边框，可以让文字变得平滑:
1 | h2 {-webkit-text-stroke: 1px transparent} |
创建红色镂空字体：
1 2 3 4 | h3 {
color: transparent;
-webkit-text-stroke: 4px red;
} |
扩展阅读: Safari Developer Library
-webkit-tap-highlight-color
这个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。要重设这个表现，你可以设置-webkit-tap-highlight-color为任何颜色。
想要禁用这个高亮，设置颜色的alpha值为0即可。
示例
设置高亮色为50%透明的红色:
1 | -webkit-tap-highlight-color: rgba(255,0,0,0.5); |
浏览器支持: 只有iOS(iPhone和iPad).
zoom: reset
通常来说，zoom是一个IE专用的属性。但是webkit也开始支持它了，而且使用值reset，webkit可以实现不错的效果(有趣的是，IE不支持这个值)。它让你重设掉浏览器中正常的缩放行为——如果某个元素被声明了zoom:reset，页面上的其它元素在用户放大页面的时候都会跟着放大。
注：其实，我们常用来禁用chrome强制字体大小的时候用到的-webkit-text-size-adjust:none;也是可以实现类似的效果，不同的是，设置该属性的元素内的文字不会被放大/缩小，但是页面上的其它元素则会变化——神飞
text-overflow
采用CSS3和text-overflow: ellipsis，如果文字比它的容器的宽度要长的话，你就可以强制文字以”…”结束它。唯一的要求是设置overflow:hidden。不幸的是，Firefox不支持这个属性，但是貌似在最近的版本中将会提供支持。
示例
1 2 3 4 | div {
width: 100px;
text-overflow: ellipsis;
} |
浏览器支持: CSS 3，所有浏览器的最新版本，除了Firefox，IE从IE6开始支持，据说Firefox到6.0也会提供支持的——希望如此吧。
word-wrap
当文字在一个比较窄的容器中时，它的某个部分可能会因为太长而不能正确的换行。比如链接就常常引起问题。如果你不想用overflow: hidden隐藏溢出的文字，那么你就可以设置 word-wrap 为break-word，它可以让字符串在到达容器的宽度限制时换行。
示例
1 2 3 4 | div {
width: 50px;
word-wrap: break-word;
} |
将width设置为100%，文字或字母会随宽度自动断行。
浏览器支持: CSS 3，所有现代浏览器。
transform: rotateX/transform: rotateY
如果你已经开始使用CSS3，那么你可能会比较熟悉transform: rotate()，这个在z轴上旋转元素的属性。
但是你是否也知道，它也可以更深入的旋转的(比如，围绕x轴和y轴)？ 这些变形结合-webkit-backface-visibility: hidden会更合适。
示例
如果你鼠标经过这个元素，它将会旋转180°，倒转过来:
1 2 3 | div:hover {
transform: rotateY(180deg);
} |
小技巧:如果只是映射一个元素，你可以设置transform为rotateX(180deg) (对应rotateY)或者设置transform 为scaleX(-1) (对应scaleY).
浏览器支持: CSS3, WebKit、firefox、Opera以及IE9