如何处理css3浏览器兼容前缀属性前缀，处理css3浏览器兼容前缀属性前缀

来源：蜘蛛抓取(WebSpider) 时间：2017-01-30 12:48 标签： css3样式前缀
09:35 提问
如何判断css3哪些属性是否要加前缀
比如box-shadow 是否加以下两个前缀就可以了
-webkit-box-shadow
-moz-box-shadow:
还是还要加上-o-box-shadow,-ms-box-shadow
如何判断哪些css3属性要加前缀，要加上哪些前缀，是否-o-,-webkit-,-moz-,-ms-四个
都要加上，还是只要加-webkit,-moz
按赞数排序
-webkit和-moz就行了 新特性基本都要加
还是找个参照的吧，这样看着方便很多
其他相似问题您所在的位置： &
1.5.4　CSS3属性无需再写厂商前缀
1.5.4　CSS3属性无需再写厂商前缀
刘炬光/赵锦江/张浩然 译
人民邮电出版社
《Sass与Compass实战》第1章Sass和Compass让样式表，本章将介绍Sass的强大特性，比如选择器嵌套、变量、混合器、选择器继承，以及Compass怎样利用这些特性构建可复用的设计模式，从而使你摆脱重复性的体力劳动，专注于设计样式而不是实现样式。本节为大家介绍CSS3属性无需再写厂商前缀。
1.5.4　CSS3属性无需再写厂商前缀
当CSS3的新属性被越来越多的浏览器新版本所采纳时，设计师们兴奋极了，因为他们可以用新的CSS属性实现以前需要非常愚蠢的样式技巧才能实现的任务。令人异常激动的是，现在用几行非常简单的CSS就能实现边框圆角，且不用在意随之而来的厂商前缀。厂商前缀就是浏览器在CSS特性前加的-webkit和-moz等前缀，用于对试验中的CSS特性进行支持。举个最简单的例子，要给一个&div&元素设置5px的边框圆角，你必须要这么写CSS：
.rounded&{ &&&-webkit-border-radius:&5 &&&-moz-border-radius:&5 &} &
一般来说，使用Compass的CSS3模块中的边框圆角混合器可以免去你这部分的重复工作。首先在你的Sass文件中引入CSS3模块，然后引入混合器：
@import&&compass/css3&; &.rounded&{ &&&@include&border-radius(5px); &} &
看一下生成的CSS：
.rounded&{ &&&-moz-border-radius:&5 &&&-webkit-border-radius:&5 &&&-o-border-radius:&5 &&&-ms-border-radius:&5 &&&border-radius:&5 &} &
这样做，不仅避免了重复输入-webkit和-moz，同时也支持了其他的一般常用的厂商命名空间，令你设计的网页可以在更多浏览器中保持良好设计。尽管这一点点重复看上去并不是那么恐怖，可如果你仅仅是想让第四个角是圆角呢？对此，火狐浏览器的开发者们并未就最好的实现方式与业界其他人士达成一致，而惯用的实现方式如下：
.rounded-one&{ &&&-moz-border-radius-topleft:&5 &&&-webkit-border-top-left-radius:&5 &} &
这个地方，Compass有更好的实现。你可以通过border-corner-radius混合器来指定单个边框圆角：
.rounded-one&{ &&&@include&border-corner-radius(top,&left,&5px); &} &
生成的CSS如下，火狐的方式也包含在内：
.rounded-one&{ &&&-moz-border-radius-topleft:&5 &&&-webkit-border-top-left-radius:&5 &&&-o-border-top-left-radius:&5 &&&-ms-border-top-left-radius:&5 &&&border-top-left-radius:&5 &} &
以上只是Compass中有关CSS3的冰山一角的一角的一角。第9章将更深入地接触所有能节省时间的特性。
&【责任编辑： TEL：（010）】&&&&&&
关于&&&&的更多文章
本书共分为10 章，旨在完整介绍两个工具：Sass 和Compass，从而
本书描述了黑客用默默无闻的行动为数字世界照亮了一条道路的故事。
本书指导企业跳出仅更新自家产品和服务的怪圈，在管理
本书十分详尽地介绍了代码逆向分析的核心原理。作者在
本书以PHP语言为基础，微信官方代码为模板，新浪SAE云
本书作者结合自己多年实践经验，从Oracle开发应用中遇到的问题着手，全面系统地介绍Oracle的安装与卸载、数据字典、安全管理以及
51CTO旗下网站热门搜索：
您的位置： -&
软件教程分类查找
非常抱歉！2345软件大全没能为您提供完善服务，万分感谢能得到您的指点！
您的建议：
精品软件课程
人气：379433
Dreamweaver是网页制作和管理的所见即所得
人气：672153
Adobe Flash，是Macromedia公司（现被Adob
人气：70412
是个原本由Macromedia公司所开发的著名网站
人气：231120
HTML的中文叫做“超文本标记语言”。是用来
小游戏推荐
如何定义CSS3属性的书写顺序
出处：2345软件大全
人气：2218
核心提示：定义CSS3属性的书写顺序
一、不同书写顺序示例
首先是比较聪明和值得推荐的写法：
.not-a-square {
-webkit-border-radius: 10
-moz-border-radius: 10
border-radius: 10
下面就是我们可能不怎么在意的，可能会产生问题的书写顺序：
.not-a-square {border-radius: 10-webkit-border-radius: 10-moz-border-radius: 10}
实际上，按照我们的逻辑思考，后面的书写也应该不会产生问题啊。比如说，火狐即支持border-radius: 10又支持-moz-border-radius: 10属性，后面的overwrite前面的也没有问题啊。但是，事实上，事情不是我们想的那么简单的。
1. 很久很久以前：浏览器即不宠幸前缀CSS3也不宠幸纯情CSS3(border-radius)；2. 不久之前：浏览器只宠幸前缀CSS3，不宠幸纯情的CSS3；3. 现在：浏览器不仅宠幸前缀CSS3属性，还宠幸纯情CSS3属性；4. 等到以后：前缀CSS3就回乡下带孩子了，浏览器只宠幸纯情CSS3属性。
下图就是这种趋势的生动写照。
二、实例说明
理想总是美好的，现实总是惨淡的。当下，webkit核心的浏览器不仅支持border-radius属性，也支持-webkit-border-radius属性，这本身没什么，只是……见下面：
.not-a-square {// 这两个家伙干的不是同一个活 border-radius: 30px 10-webkit-border-radius: 30px 10}
当属性超过一个参数值的时候，不同的属性产生的作用是不一样的。
纯情的那种写法(border-radius: 30px 10px)，是让box左上和右下角为30像素圆弧，左下角和右上是10像素圆弧。而那种杂碎的前缀写法(-webkit-border-radius)，则box渲染为每个角都是30像素宽10像素高的圆弧。
如果您现在使用的是最新的Chrome浏览器（我的是Chrome6.0.472.62），或者是（Safari4依旧扁平）Safari5，您就能看到效果了。
其实Border radius不是唯一的实例，CSS3中的background-image 渐变貌似也有同样的遭遇。我想，以后会有人吧这些差异全部罗列出来的。但是，无论怎样，把“纯情”的写法放在最后压轴总是更明智的。
相关教程推荐
相关软件推荐
资源统计：无插件软件：96992个 无病毒软件：97301个 昨日已处理146个带插件、病毒的软件
本站总软件：97301个 软件总下载次数：22.383亿次
软件教程文章：101883篇 总浏览次数：3.275亿次

我要回帖

更多关于 css3样式前缀 的文章

 

随机推荐