标签:
指定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>
local-link可以定义相对地址的链接样式
:local-link {font-weight: normal;}
更多可以参考:http://www.kqiqi.com/knowledge/program/997.html
标签:
原文地址:http://www.cnblogs.com/laneyfu/p/4315040.html