常用的CSS3 -webkit-前缀

1：-webkit-mask:让一个元素成为蒙板相关的属性有-webkit-mask-clip、 -webkit-mask-position 和-webkit-mask-repeat等，严重依赖来自于background中的语法

-webkit-mask: -webkit-gradient(linear, lefttop, leftbottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));

2：-webkit-text-strokeCSS边框的一个不足就是只有矩形的元素才能使用。-webkit-text-stroke可以为文字添加边框。它不但可以设置文字边框的宽度，也能设置其颜色。而且，配合使用color: transparent属性，你还可以创建镂空的字体！

-webkit-text-stroke: 4px red;

3：-webkit-tap-highlight-color这个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。要重设这个表现，你可以设置-webkit-tap-highlight-color为任何颜色。

想要禁用这个高亮，设置颜色的alpha值为0即可

-webkit-tap-highlight-color: rgba(255,0,0,0.5);浏览器支持: 只有iOS(iPhone和iPad)

4：-webkit-box-reflect你还记得几乎每个网站都把他们的网站logo或者头部的文字做成倒影的那个年代吗？谢天谢地，那个年代已经过去了，但是如果你要在一些按钮、导航、或者其他UI元素上更好的使用这个技术，-webkit-box-reflect是更好的选择。

这个属性接受above、below、left和right四个关键词，它们设置倒影的方向，它们和一个设置元素和它的倒影建的距离的数字一起使用。同时，蒙板图片也是同样支持的(看上面的-webkit-mask部分，不要搞混了哈)。倒影会自动生成并对布局没有影响。下面的元素只用了CSS，第二个按钮用了-webkit-box-reflect属性

-webkit-box-reflect: right 0 url(mask.png);

5：-webkit-marquee另一个属性让我们回到美好的从前：那个遍地marquee(跑马灯)的年代。有趣的是这个已经被遗弃的标签反而在现在变的很有用，比如我们在比较小的手机屏幕上切换内容，如果不断行的话文字将不能完全显示。

ozPDA创建的这个天气的应用很好的使用了它。 (如果你木有看到变换的文字，可以尝试换一个城市来体验。需要使用WebKit内核浏览器)

.marquee {
white-space: nowrap;
overflow:-webkit-marquee;
width: 70px;
-webkit-marquee-direction: forwards;
-webkit-marquee-speed: slow;
-webkit-marquee-style: alternate;
}

要让marquee工作需要一些前提条件。首先，white-space必须设置为nowrap，这样才能让文字不自动换行，其次，overflow必须设置为-webkit-marquee，宽度也要设置为比文字实际长度小的数值。

剩下的属性确保文字从左边滚动到右边(-webkit-marquee-direction)、来回移动(-webkit-marquee-style)以及以比较低的速度移动(-webkit-marquee-speed)。其它的属性有-webkit-marquee-repetition，用来定义marquee重复的次数，-webkit-marquee-increment, 定义每次递增的速度变化

6：-webkit-appearance你曾经想过将一张图片伪装成单选按钮么？或者，一个输入框看起来像一个复选框？那么现在appearance 出现了。即便你并不想要让一个链接看起来总是像个按钮，下面这个例子也可以让你了解到，只要你愿意就可以做到的：

a {
-webkit-appearance: button;
-moz-appearance: button;
}

7：-webkit-user-select禁止选择文本

8：display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;内容居中

9:-webkit-backface-visibility:hidden;隐藏后台的层;

10：-webkit-text-size-adjust:none;在中文Chrome里面，网页Css里所有的小于12px的字体 设置都无效，顾名思义禁用webkit内核浏览器的文字大小调整功能 

11：-webkit-overflow-scrolling:touch overflow:auto 在IOS里原生的滚动有惯性效果：当你放手时，滚动会继续，然后惿来好像你轻轻地弹一下，然后默认情况下滚动元素并不是 这样的，当你手指离开 的时候滚动会立马停下来，为了解决这个问题，webkit里有一个带有制造商前缀的css属性：在IOS上添加-webkit-overflow-scrolling:touch

12： -webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：

• display: -webkit-box;必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
• -webkit-box-orient必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
• text-overflow，可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本 。 

-webkit-line-clamp

 

-webkit-overflow-scrolling: touch”（允许独立的滚动区域和触摸回弹）在ios滚动主要加上body上

转载于:https://www.cnblogs.com/liuliuwei/p/5717556.html