码迷,mamicode.com
首页 > Web开发 > 详细

webkit内核浏览器的CSS写法

时间:2015-03-05 10:44:12      阅读:157      评论:0      收藏:0      [点我收藏+]

标签:

指定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

 

webkit内核浏览器的CSS写法

标签:

原文地址:http://www.cnblogs.com/laneyfu/p/4315040.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!