border-radius(圆角)-css3演示

愚人码头 撰写  

border-radius(圆角)的几点说明:
  • border-radius:长度
  • Firefox支持border-radius(圆角):-moz-border-radius:2px;
  • webkit内核的Safari和Chrome支持border-radius(圆角):-webkit-border-radius:2px;
  • Opera支持border-radius(圆角):border-radius:2px;
  • IE不支持border-radius(圆角)

我们还可以随意指定圆角的位置,左上、左下、右上、右下四个方向。在firefox、webkit内核的Safari和Chrome和opera(css3)、中的具体书写格式如下:
-moz-border-radius-topleft / -webkit-border-top-left-radius / border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius / border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius / border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius /border-bottom-right-radius

border-radius(圆角)还有其他一些用法,Firefox、webkit内核的Safari和Chrome和opera(css3)其他写法有些略微的差异,具体可以查看以下网址:https://developer.mozilla.org/en/CSS:-moz-border-radius
http://www.the-art-of-web.com/css/border-radius/
http://dancewithnet.com/2008/12/27/border-radius-and-rounded-corner/

演示地址:http://www.css88.com/tool/css3Preview/Border-Radius.html

更多相关链接:


相关日志:

刚刚被浏览过的文章:


条评论

  1. 发表了 2010年03月6日 在 8:41 上午 | 永久链接

    说圆角了,怎么还有box-shadow啊?

个引用通告

  1. 关于 CSS3 中的圆角介绍 » Life Studio 发表在 2010年04月19日 于 9:14 下午

    [...]   以上转自:border-radius(圆角)-css3演示 [...]

发表评论

Your email is never shared. 标记为 * 的为必填项目

*
*

评论时,昵称或个人网站填的是商业网站的,一概标记为垃圾评论不予显示,并设置相关网站为过滤关键字,提交到google、百度垃圾网站数据库