利用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

1 Comment

  1. Pingback: 常用的CSS3新增属性 « 任鸟飞网页设计

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

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

无觅相关文章插件,快速提升流量

任鸟飞网页设计博客 谜题推理 No.1 Web Design Gallery IndustryIdea LookForDesign AWebGallery Mobile Web Template iDesign Wallpaper Big Funny Picture iPhone Faves iPhone Mobi iPad Faves Android Faves BlackBerry Faves Best Design Magazine All Banner Templates Blog Earn Tips 是谁啊 只爱美人 家乡美 唯美爱 美人衣妆 AutoCAD 2D | Pro/E 3D江苏名企The HTML5 Templates