用户名: 密   码:
   飞诺网 加入收藏
飞诺网 网页设计 FrontPage Dreamweaver html Javascript css 网页制作技巧 网页特效 色彩原理 设计理念 web技术文档
CSS系列教程 CSS实例 CSS技术文档

您当前的位置:飞诺网 >>  网页设计 >>  css >> CSS系列教程

css3.0抢先看(一):border-radius

www.diybl.com    时间 : 2010-06-29  作者:佚名   编辑:壹枝雪糕 点击:   [ 评论 ]

近来在国外的一些web学习网站上学习了些css3.0的新东东,组织了一下,打算分批写下来。由于个人水平有限,难免有理解上的错误,欢迎大家指出我的错误。

     在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用户将在这里看到圆角边框

此外,设计者还可以随意指定圆角的位置,左上、左下、右上、右下四个方向。在mozilla/firefox和safari中的具体书写格式如下:

-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

Mozilla/Firefox 和Safari 3 中看到的左上圆角
Mozilla/Firefox 和Safari 3 中看到的右上圆角
Mozilla/Firefox 和Safari 3 中看到的左下圆角
Mozilla/Firefox 和Safari 3 中看到的右下圆角
好吧,终于写完border-radius了。

如果图片或页面不能正常显示请点击这里
CSS系列教程推荐文章

文章评论