常用的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) |
这个属性接受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上