利用CSS3的Border-radius属性定义边框圆角

利用CSS3的border-radius属性来定义块元素的边框圆角。

具体示例:

Mozilla/Firefox和Safari 3 浏览器支持此属性定义。

代码如下:

<div style="background-color: #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000;
padding: 10px;" >

根据需要,可定义指定位置的圆角。例如:

Mozilla/Firefox和Safari 3 浏览器支持此属性定义

代码如下:

<div style="background-color: #ccc;-moz-border-radius: 5px;
-webkit-border-radius: 5px;border: 1px solid #000;
padding: 10px;-moz-border-radius-topleft:10px;-webkit-border-top-left-radius:10px;">
Mozilla/Firefox和Safari 3 浏览器支持此属性定义
</div>

根据下面给出的代码,定义指定位置的圆角。

  • -moz-border-radius-topleft / -webkit-border-top-left-radius
  • -moz-border-radius-topright / -webkit-border-top-right-radius
  • -moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
  • -moz-border-radius-bottomright / -webkit-border-bottom-right-radius
标签:
除非注明,本博客文章均为原创,转载请以链接形式标明本文地址
原创文章如转载,请注明:转载自 任鸟飞网页设计 [ http://www.renniaofei.com/ ]
本文链接地址: http://www.renniaofei.com/code/border-radius-create-rounded-corners-with-css3/
引用通告地址 Trackback URL:直接在本文链接地址后添加 trackback/
本文短网址: http://bit.ly/boAF5s
任鸟飞

任鸟飞网页设计网创办者 主要关注网页设计,网站建设,图形图像设计。 Twitter @renniaofei QQ:29900684

1 条评论

  1. 常用的CSS3新增属性 « 任鸟飞网页设计 三月 11th, 2010   12:30 上午

    [...] 边框圆角 Border Radius [...]

留下评论

:wink: :-| :-x :twisted: :) 8-O :( :roll: :-P :oops: :-o :mrgreen: :lol: :idea: :-D :evil: :cry: 8) :arrow: :-? :?: :!: