IE9、 Firefox、Safari, Chrome的CSS3圆角属性

知更鸟 2011年3月15日12:33:5325.5K

这篇文章主要是记录一下,微软最新发布的 IE9 浏览器CSS 圆角属性,现在CSS3已经可以轻松实现跨浏览器的圆角效果,包括Firefox高版本,IE9,Safari,Chrome等高端浏览器。文章源自知更鸟-https://zmingcx.com/css3-rounded-corners-to-achieve-ie9.html

我们这样去定义一个盒子模型:文章源自知更鸟-https://zmingcx.com/css3-rounded-corners-to-achieve-ie9.html

  1. -moz-border-radius: 10px;
  2. -webkit-border-radius: 10px;
  3. border-radius:10px;

在Firefox,和Chrome中的效果:文章源自知更鸟-https://zmingcx.com/css3-rounded-corners-to-achieve-ie9.html

IE9、 Firefox、Safari, Chrome的CSS3圆角属性文章源自知更鸟-https://zmingcx.com/css3-rounded-corners-to-achieve-ie9.html

其中 -moz-border-radius 是 Firefox 实现圆角的私有属性,而 -webkit-border-radius是 webkit 内核浏览器(如 Safari 和 Chrome)实现圆角的私有属性。文章源自知更鸟-https://zmingcx.com/css3-rounded-corners-to-achieve-ie9.html

我们也可以分别设置4个圆角的属性值,例如这样的样式:文章源自知更鸟-https://zmingcx.com/css3-rounded-corners-to-achieve-ie9.html

  1. -moz-border-radius-topleft: 50px;
  2. -moz-border-radius-topright: 10px;
  3. -moz-border-radius-bottomright: 10px;
  4. -moz-border-radius-bottomleft: 10px;
  5. -webkit-border-top-left-radius: 10px;
  6. -webkit-border-top-rightright-radius: 50px;
  7. -webkit-border-bottom-rightright-radius: 10px;
  8. -webkit-border-bottom-left-radius: 10px;

得到的效果如下图:文章源自知更鸟-https://zmingcx.com/css3-rounded-corners-to-achieve-ie9.html

IE9、 Firefox、Safari, Chrome的CSS3圆角属性文章源自知更鸟-https://zmingcx.com/css3-rounded-corners-to-achieve-ie9.html

我们还可以使用CSS缩写样式实现圆角效果,例如下面的代码:文章源自知更鸟-https://zmingcx.com/css3-rounded-corners-to-achieve-ie9.html

  1. -moz-border-radius: 50px 30px 20px 10px;
  2. -webkit-border-radius:20px 10px 5px 50px;

当然我们也可以为盒子模型添加边框属性:文章源自知更鸟-https://zmingcx.com/css3-rounded-corners-to-achieve-ie9.html

IE9、 Firefox、Safari, Chrome的CSS3圆角属性文章源自知更鸟-https://zmingcx.com/css3-rounded-corners-to-achieve-ie9.html

  1. -moz-border-radius: 10px;
  2. -webkit-border-radius: 10px;
  3. border-radius:10px;
  4. border:10px solid #69F;

IE 9 没有使用私有属性,直接使用 border-radius 定义圆角,border-radius 是定义四个角都是圆角,如果要具体的一个角,可以使用下面四个属性:文章源自知更鸟-https://zmingcx.com/css3-rounded-corners-to-achieve-ie9.html

  1. border-bottom-left-radius:5px
  2. border-bottom-rightright-radius:5px
  3. border-top-left-radius:5px
  4. border-top-rightright-radius:5px

貌似当圆角数值小于4px时将失效文章源自知更鸟-https://zmingcx.com/css3-rounded-corners-to-achieve-ie9.html

参考文章:http://web.d-times.net/2011/01/10/rounded.html文章源自知更鸟-https://zmingcx.com/css3-rounded-corners-to-achieve-ie9.html

文章源自知更鸟 | 崇尚专注 追求极致 分享交流WordPress经验与技巧,关注前端设计与网站制作,打造自己专属的WordPress主题,让你的博客与众不同!
weinxin
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
animation动画复合属性 Web前端

animation动画复合属性

css3中的animation动画复合属性:name(绑定的动画名称) duration(完成时间) timing-function(如何完成一个周期) delay(启动前间隔) iteration-...
网页特效live2d看板娘 WordPress

网页特效live2d看板娘

如果喜欢给自己的网站加些花花草草,live2d看板娘就是一个不错的特效,人物会跟随你的鼠标动,超级可爱! 看板娘   将下面代码添加到网页适当位置即可。 <script src="ht...
安卓文本无法垂直居中 Web前端

安卓文本无法垂直居中

安卓 webview 的字体大小在小于 12 像素的时候无法使用行高来垂直居中。目前在微信等应用都存在该问题,而在最新的移动端 Chrome 浏览器上无该问题(截止本文编写时间,微信客户端的 chro...
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定

评论:2   其中:访客  2   博主  0
    • 小志
      小志 0

      打酱油

      • Deep
        Deep 2

        很好。代码少。可惜兼容性差