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

知更鸟
知更鸟
知更鸟
1633
文章
6930
评论
2011年3月15日12:33:5325.5K

这篇文章主要是记录一下,微软最新发布的 IE9 浏览器CSS 圆角属性,现在CSS3已经可以轻松实现跨浏览器的圆角效果,包括Firefox高版本,IE9,Safari,Chrome等高端浏览器。

我们这样去定义一个盒子模型:

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

在Firefox,和Chrome中的效果:

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

其中 -moz-border-radius 是 Firefox 实现圆角的私有属性,而 -webkit-border-radius是 webkit 内核浏览器(如 Safari 和 Chrome)实现圆角的私有属性。

我们也可以分别设置4个圆角的属性值,例如这样的样式:

  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;

得到的效果如下图:

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

我们还可以使用CSS缩写样式实现圆角效果,例如下面的代码:

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

当然我们也可以为盒子模型添加边框属性:

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

  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 是定义四个角都是圆角,如果要具体的一个角,可以使用下面四个属性:

  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时将失效

参考文章:http://web.d-times.net/2011/01/10/rounded.html

weinxin
版权声明
本站原创文章转载请注明文章出处
大自然的配色 Web前端

大自然的配色

配色是一门高深的艺术和学问,网上有很多将一些色块组合成各种色系的配色表,再冠以为什么清新、明快、时尚、稳重的名称,其实都是胡扯,你说这个配色非常高雅、明快,别人可能认为是土气、花哨,个人喜好不同,不能...
禁止查看网页源代码方法 Web前端

禁止查看网页源代码方法

总是有新手问,如何禁止别人查看自己的网页源代码?答案是没有,对于有经验者所有方法都是徒劳的。 禁止查看网页源代码方法 一般常用的方法是在网页中加上类似的JS代码,屏蔽屏蔽键盘和鼠标右键。 docume...
匿名

发表评论

匿名网友

:?: :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

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