繁體中文当前位置: 首页 > 图文教程 > 专题中心 > CSS3教程和css3新特性专题 > 认识CSS3和HTML5 > 使用CSS3新技术 完美实现圆角效果
- 认识CSS3和HTML5
- HTML5和CSS3给网站设计带来出色效果
- HTML5和CSS3新的WEB标准和浏览器支持
- jQuery插件实现css3效果
- 使用CSS3新技术 完美实现圆角效果
- 使用CSS3将你的网站设计推向未来
- 利用CSS3特性和浏览器中的工具进行网页设计
- css3教程：把系统日志记录到远程服务器
- css3教程：文字阴影解析
- 向你介绍丰富的CSS3 特性
- 人们期待的CSS3的10大功能
- CSS3教程:box-sizing属性
- Firefox 3.5的HTML5和CSS3特性
- Webjx推荐20个关于CSS3优秀学习资源
- CSS教程：CSS3圆角属性
- CSS3伪类选择器：nth-child()
- CSS3中的5个有趣的新技术
- CSS3教程:边框属性border的极致应用
- CSS3五个技巧给你的网站带来出色的效果
- CSS3教程:新增加的结构伪类
- 介绍CSS3使用技巧5个
认识CSS3和HTML5 中的 使用CSS3新技术 完美实现圆角效果
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-12-06 浏览: 56 ::
收藏到网摘: n/a
现在使用CSS3 技术不需要图片即可实现圆角，把侧边栏标题背景的圆角效果和搜索框的圆角效果用 CSS3 实现。记录一下以便以后使用。W3C 很早就制订了实现了 CSS 圆角的 CSS3 属性：border-radius，Firefox 和 Safari 也通过私有属性实现了该功能：
| <div style=" background-color: #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #000; padding: 10px;" >Firefox 和 Safari 实现圆角</div> |
效果如下：
其中 -moz-border-radius 是 Firefox 实现圆角的私有属性，而 -webkit-border-radius 是 webkit 内核浏览器（如 Safari 和 Chrome）实现圆角的私有属性，如果你只要指定某一个角是圆角的话，它们都分别定义了四个属性：
| -moz-border-radius-topleft / -webkit-border-top-left-radius |
当然 IE （包括 IE8）还是不支持，所以该效果只能在 Firefox, Safari, 以及 Chrome 中查看。
评论 (0) All
