CSS3圆角属性在Firefox,Chrome,Safari的实现
2016-03-09 00:00
555 查看
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;将不会有任何效果。
总结了圆角属性不同浏览器下的运用
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
相关文章推荐
- CSS HACK区别IE6、IE7、IE8、Firefox兼容性
- 三种简洁的经典高效的DIV+CSS制作的Tab导航简析
- 设置QScrollBar(垂直与水平)滚动条样式
- CSS选择器、优先级与匹配原理
- HTML+CSS基础篇(二)——表单标签,与浏览器交互
- 不要对td设置position样式
- css3 media响应式
- Django入门(二) 添加外部网页样式
- HTML+CSS基础篇(一)——认识标签
- 表单美化css
- swfit中一个字符串显示两行不同的样式
- css 浮动 相对定位 绝对定位区别
- 十天精通CSS3(12)
- 十天精通CSS3(11)
- Html+CSS 学习第二天
- 十天精通CSS3(10)
- Html+CSS 学习第二天
- 十天精通CSS3(9)
- 十天精通CSS3(8)
- 十天精通CSS3(7)