CSS3 圆角技术能非常好的美化你的页面效果, 而且避免了使用图片辅助, 一则省去了制作图片的时间, 二则省去了浏览器加载图片造成的延迟和带宽. 如今, 这种利用 CSS 制作圆角的技术已经得到了大多数主流浏览器的支持, 包括 Safari, 谷歌浏览器, IE,Opera 和火狐浏览器. 下面让我们来看看 border-radius 的语法, 解释, 以及 IE 是如何支持它的.
观看演示
语法和说明
在 CSS3 中用来生成圆角效果的属性是 border-radius. 这个属性跟大家熟知的 width 等属性的用法相似:
- .roundElement {
- border-radius: 10px;
- }
上面的这句代码的作用是设置一个元素的四个角的弧度半径值都为 10px. 你也可以对每个角单独指定:
- .pearElement {
- border-top-left-radius: 7px;
- border-top-right-radius: 5px;
- border-bottom-right-radius: 6px;
- border-bottom-left-radius: 8px;
- }
如果你觉得上面的写法太复杂, 可以使用下面 border-radius 简写的方法:
- .oddRoundElement {
- border-radius: 12px 5px 12px 5px;
- /* or */
- border-radius: 12px 5px;
- }
四个值分别代表的是 top-left, top-right, bottom-right, bottom-left 四个角.
各浏览器对 border-radius 的支持
因为这种圆角技术是 CSS3 里出现的, 老式浏览器或较早期的浏览器中用到这个属性时需要在 CSS 里添加浏览器引擎前缀 (vendor prefixes). 会是 {prefix}-border-radius 这样一个样子, 而具体各种浏览器引擎前缀是下面这样的写法:
- -moz-border-radius: 20px;
- -webkit-border-radius: 20px;
- -o-border-radius: 20px;
- /* 火狐浏览器 */
- -moz-border-radius-topleft:15px; /* top left corner */
- -moz-border-radius-topright:50px; /* top right corner */
- -moz-border-radius-bottomleft:15px; /* bottom left corner */
- -moz-border-radius-bottomright:50px; /* bottom right corner */
- -moz-border-radius:10px 15px 15px 10px; /* shorthand topleft topright bottomright bottomleft */
- /* webkit 引擎的浏览器 */
- -webkit-border-top-left-radius:15px; /* top left corner */
- -webkit-border-top-right-radius:50px; /* top right corner */
- -webkit-border-bottom-left-radius:15px; /* bottom left corner */
- -webkit-border-bottom-right-radius:50px; /* bottom right corner */
基本上, 你需要对每种浏览器引擎做各自的声明, 加上这些讨厌的稍微不同的代码来保证完全支持 border-radius. 但是, 如果你使用的是最新版的浏览器, 包括火狐, 谷歌, IE 等, 你不需要使用这些前缀, 因为这个技术已经很成熟, 在各种最新版的浏览器里已经受到了普遍支持.
让 IE 支持 border-radius
直到 IE9 才有对 border-radius 属性的支持, 相信很多 Web 开发人员和 Web 应用设计人员都很沮丧. 在 IE9 里, 最重要的一个点是使用 edge META 标记:
- <meta http-equiv="X-UA-Compatible" content="IE=edge" />
- <style>
- border-top-right-radius: 7px; border-top-left-radius: 7px; border-bottom-right-radius:
- 2px; border-bottom-left-radius: 2px;
- </style>
如果你的 IE 比较老, 不支持 border-radius, 有很多其它的技术可以弥补这个缺陷, 我遇到过的最好的一个解决方法是使用一个很小的 JavaScript 程序包, 叫做 CurvyCorners http://code.google.com/p/curvycorners/ . 这个 CurvyCorners http://code.google.com/p/curvycorners/ 用 JavaScript 动态的生成很多 div 标记, 用这些 div 标记来绘出圆角效果, 甚至支持消除锯齿功能.
CurvyCorners 的用法很简单. 第一步是在页面中引入 CurvyCorners.JS 脚本:
- <!-- SIMPLY INCLUDE THE JS FILE! -->
- <script type="text/javascript" src="curvy.corners.trunk.js">
- </script>
CurvyCorners 会在 DOM 元素里寻找具有 border-radius 属性的元素, 然后依次给它们制作出圆角效果. 不需要辅助图片. 你甚至可以设置指定元素的弧度半径:
- var settings = {
- tl: { radius: 12 },
- tr: { radius: 12 },
- bl: { radius: 12 },
- br: { radius: 12 },
- antiAlias: true
- };
- /* moooo */
- $$('.round').each(function(rd) {
- curvyCorners(settings,rd);
- });
我强烈建议你应该指定需要使用圆角的元素, 因为让脚本搜索整个页面来寻找需要圆角处理的元素是一个很耗 CPU 的过程, 而且这个过程是每个页面加载时都会执行.
观看演示
基本的所有浏览器都支持 CSSborder-radius 属性, 包括 IE, 火狐, Safari, 谷歌浏览器和 Opera. 这个小小的功能能让你的页面表现出完全别样的效果.
来源: http://www.webhek.com/post/css-rounded-corners.html