webkit内核浏览器的CSS写法

浏览数：16 / 时间：2015年06月09日

指定Mobile设备或者小屏幕桌面屏幕

@media screen and (max-width:480px){

}

如果一排有好几个元素，并且有的用百分比定义，有的是用像素px定义，那么对于这种混合型的宽度计算公式为：

width: calc(100%-40px); 计算宽度

波浪型链接

text-decoration: #FF8800  wavy ine-through;

用这个属性之后会收紧字符间的距离

text-rendering: optimizeLegibility;

可以改变按钮或者其它控件看起来类似本地的控件

-webkit-appearance: none; -webkit-appearance

美化表单校验时的提示样式

::-webkit-validation-bubble {}
::-webkit-validation-bubble-message {}
::-webkit-validation-bubble-arrow {}
::-webkit-validation-bubble-arrow-clipper {}当提示出现时类似于下面的结构
<div -webkit-validation-bubble>
<div -webkit-validation-bubble-arrow></div>
<div -webkit-validation-bubble-arrow-clipper></div>
<div -webkit-validation-bubble-message>Error Message</div>

-webkit-text-stroke可以用来给文字添加描边

-webkit-text-stroke:  1px rgba(0,0,0,0.5);

定义一个图片用来遮罩元素

-webkit-mask-image:  url(/path/to/mask.png);

实例：

<div class="element">  </div>

<style type="text/css">

.element {
        width: 400px;
        height: 300px;
        -webkit-mask-size:100%;
        background-image:none;
        -webkit-mask-image:url(‘images/css-masking-6.png‘); //遮罩的图形
        background:url(‘images/2.jpg‘) 30px 0px no-repeat;  //需要显示的图或者颜色
    }
</style>