CSS3圆角属性在Firefox,Chrome,Safari的实现
今天在aw那里看到他的博客用了Firefox专有的圆角属性,另外WordPress的后台也使用了,于是我自己也就试一下来用了。目前IE还未支持圆角属性,IE8我还不清楚支不支持,或许我们以后只要使用border-radius这个CSS3属性就能轻松地在现代浏览器实现这个困扰很多小盆友的问题了,希望这一天的到来不会太遥远。目前我们已经可以在Firefox,Chrome,Safari实现这个功能了,但他们也还是使用私有属性来实现,用法上略有区别。
先说一下Firefox的圆角属性:
-moz-border-radius: {1,4} | inherit
如果你想设置四个角都是一样圆角的话,可以像这样子直接设置-moz-border-radius:5px;
也可以单独设置元素的上左、上右、下右、下左四个角的值,分别用-moz-border-radius-topleft、-moz-border-radius-topright、-moz-border-radius-bottomright、-moz-border-radius-bottomleft来设置。
也可以用合并起来一起设置,如我目前的主题暂时设置的-moz-border-radius:5px 0 5px 0;
对chrome、Safari这两个webkit内核的浏览器来说,是用-webkit-border-radius来实现的。
-webkit-border-radius:{1,2} | inherit;
如果你想设置四个角都是一样圆角的话,依然可以像这样子直接设置-moz-border-radius:3px;
如果是单独设置四个角的话,需要采取这种方式
-webkit-border-top-left-radius:5px 10px;
-webkit-border-top-right-radius:5px 10px;
-webkit-border-bottom-right-radius:5px 10px;
-webkit-border-bottom-left-radius:5px 10px;
如果是要合并的话,只支持-webkit-border-radius:3px;或者是这样子-webkit-border-radius:3px 4px;使用-webkit-border-radius:5px 0 5px 0;将不会有任何效果。
著名皮肤制作人utom总结了圆角属性不同浏览器下的运用
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
分享到:
相关推荐
iecss3.htc css3圆角支持文件
css3圆角支持火狐、IE和webkit
解决IE不兼容css3圆角和阴影问题
css3圆角阴影价格表 css3圆角阴影价格表网页特效.zip
css3教程应用css3 圆角border-radius属性制作...
解决css3圆角特性不兼容ie6,ie7,ie8等问题,让ie9一下版本完美兼容css3圆角。实现非常简单
CSS3圆角代码 基于jQuery+CSS的圆角框效果,演示一下如何使用jQuery并配合CSS代码实现漂亮的圆角框效果。 提示:本圆角效果在IE下显示有问题,在Opera及火狐及Google浏览器下都没有问题。
Css3圆角矩形,兼容各种浏览器的,效果很好
css3圆角效果,能使网页做的更有个性。
兼容所有浏览器的CSS3圆角,非常使用于网页设计圆角设计。
使得IE支持CSS3 圆角阴影 渐变
CSS3圆角菜单特效集,一共有三款圆角菜单,基于HTML5/CSS3技术实现,带阴影效果,鼠标悬停于菜单后菜单背景色变化,三种颜色的菜单,自己也可重新美化。
响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 第1章 HTML5+CSS3初体验 例1-3 CSS3圆角边框
黑色简洁css3圆角电影影视宣传wordpress模板6044
目前CSS3的应用已经越来越普及了,它最常见的一个圆角功能非常的不错,可以省略掉不少图片从而直接用代码实现按钮的渐变、描边、阴影等效果,本实例就是一款直接用CSS3实现的,无需其他任何JS或者flash、亦不需任何...
让IE浏览器支持CSS3圆角属性的方法.docx
css3.htc 兼容IE8圆角 需引入的文件 css3.htc 兼容IE8圆角 需引入的文件 css3.htc 兼容IE8圆角 需引入的文件
让ie6 /7支持css3 如border-radius等特性的插件
最基本的css3效果,很好用,很强大,值得参考使用。
我们都知道IE6,7并不支持CSS3的属性,IE8也不能很好的支持CSS3。但是有一个小脚本能够做到,它可以让IE支持 CSS3,包括:border-radius (rounded), box-shadow ( shadow), text-shadow等……