通过使用 层叠样式表 (CSS),级别 3 (CSS3) 为布局元素生成圆角,可以美化网站的外观。 本主题演示了通过使用 Windows Internet Explorer 9 中的新圆角内置支持让您的网站布局更具吸引力的几个基本方法。 它包含以下几部分:
起点
对于本主题中描述的任务,我们从最基本的网页开始操作。 该页是一家虚拟的咖啡公司的网页,其中包括一些 HTML、一些 层叠样式表 (CSS) 和几个图像。 可以查看并下载 HTML 和 CSS。 下面的屏幕快照显示了初始网页。
![初始网页的屏幕快照。 初始网页的屏幕快照。](http://i.msdn.microsoft.com/dynimg/IC485206.png)
要点
在创建您自己的网页以利用 Internet Explorer 9 中引入的新 Web 标准支持时,请确保在页面顶部包括以下 !DOCTYPE 指令:
<!DOCTYPE html>
与许多其他布局一样,在此布局中,框有助于以可视方式分隔内容,并提供视觉吸引力。 同样,此布局完全是平直的。 不过,可利用 Internet Explorer 9 和 CSS3 为这些框生成圆角。
Internet Explorer 9 中使用 CSS3 生成的圆角非常可靠,并且这些圆角有很多种可能的组合。 在本主题中,我们将重点说明示例布局的三个区域,如下图中的突出显示部分所示:
- 咖啡豆缩略图图像的边框(由
product_thumb
类选择器定义) - 靠页面右侧的边栏(由
sidebar
ID 选择器定义) - 靠页面顶部和底部的黄色标题带区(由
header
和footer
ID 选择器定义)
![本主题讨论如何向突出显示的区域添加圆角 本主题讨论如何向突出显示的区域添加圆角](http://i.msdn.microsoft.com/dynimg/IC485207.png)
生成全部相同的圆角
我们将从咖啡豆缩略图开始操作,为其提供略微平滑的角。 若要为框生成全部相同的圆角,请为 border-radius 属性指定一个值。 (该值可以是一个长度值或一个百分比;百分比基于总高度或宽度。 本主题中的所有示例都使用长度值。) 若要以其最简单的形式使用此属性,请指定用于定义框的每个角的形状的圆圈的半径。 在下面的图像中,已将 20 像素的 border-radius 应用于矩形。 请记住圆圈定义角的曲线的方式。
![矩形上的 border-radius 的演示 矩形上的 border-radius 的演示](http://i.msdn.microsoft.com/dynimg/IC485208.png)
当前,定义缩略图外观的 CSS 为下面的类选择器:
.product_thumb { clear: left; height: 80px; width: 80px; margin-right: 10px; padding: 5px; float: left; border-width: 1px; border-color: #7f7f7f; border-style: dashed; }
![具有原始样式的缩略图图像 具有原始样式的缩略图图像](http://i.msdn.microsoft.com/dynimg/IC485209.png)
下面添加 border-radius 属性,并为其分配一个 5 像素的值。 可通过将以下行添加到 product_thumb
类选择器执行此操作:
border-radius: 5px;
在将此行添加到选择器后,咖啡豆的所有边框将如下所示:
![border-radius 属性设置为 5 像素的缩略图图像 border-radius 属性设置为 5 像素的缩略图图像](http://i.msdn.microsoft.com/dynimg/IC485210.png)
分别生成多个圆角
现在我们将注意力转到边栏上。 当前,定义边栏外观的 CSS 为下面的 ID 选择器:
#sidebar { font-size: 12px; padding: 15px; margin: 20px 0px 10px 75%; border-style: dashed; border-color: #996600; border-width: 5px; }
这使得边栏在 Internet Explorer 9 中按以下方式显示:
![具有原始样式的边栏 具有原始样式的边栏](http://i.msdn.microsoft.com/dynimg/IC485211.png)
通过使用下列两种方法之一,可使用比其他角更宽的曲线生成左上方圆角。 第一种方法将使用其他 border-radius 属性之一。
border-radius 属性如下:
- border-top-left-radius: 定义框的左上角。
- border-top-right-radius: 定义框的右上角。
- border-bottom-right-radius: 定义框的右下角。
- border-bottom-left-radius: 定义框的左下角。
我们可以使用这些属性中的某些属性填充边栏左上角处的空白区域,并向边栏的下部添加一些有吸引力的曲线。
下面向 sidebar
ID 选择器中添加以下行:
border-top-left-radius: 10em; border-bottom-right-radius: 5em; border-bottom-left-radius: 2em;
向该选择器中添加这些行后,边栏将如下所示:
![左上角、右下角和左下角的 border-radius 分别设置为 10 ems、5 ems 和 2 ems 的边栏 左上角、右下角和左下角的 border-radius 分别设置为 10 ems、5 ems 和 2 ems 的边栏](http://i.msdn.microsoft.com/dynimg/IC485213.png)
还可通过将 border-radius 属性用作一个速记属性,分别生成边栏的各个圆角。 如果您为 border-radius 属性输入多个值,则每个角的曲线随值的顺序的不同而不同。 例如,通过将以下行添加到选择器,可在边栏示例中实现相同的结果:
border-radius: 10em 0 5em 2em;
border-radius 属性中的值的顺序如下:
border-radius: ul ur lr ll;
此处,ul 表示左上角、ur 表示右上角、lr 表示右下角、ll 表示左下角。 上述任一值的长度值为零都意味着未生成任何曲线;角仍为直角。 下图中演示了值的顺序。
![演示具有多个值的 border-radius 属性的图示 演示具有多个值的 border-radius 属性的图示](http://i.msdn.microsoft.com/dynimg/IC485216.png)
对于不同的结果,我们也可以仅将两个值或三个值用于 border-radius 属性。 您可以自己尝试一下此操作。 有关此属性的行为的详细解释,请参阅 MSDN 上的 border-radius 属性参考页。
使用椭圆生成圆角
目前,我们仅使用了由圆圈定义的圆角。 border-radius 属性也可创建由椭圆定义的角,具有不同的 x(水平)和 y(垂直)半径。
下面我们使用两个椭圆来生成由 header
ID 选择器定义的框的两个顶部圆角,以及由 footer
ID 选择器定义的框的两个底部圆角。
我们需要使用椭圆来定义标头的左上角和右上角,因此向 header
选择器中添加下面两行代码:
border-top-left-radius: 50px 25px; border-top-right-radius: 50px 25px;
若要使用椭圆定义页脚的左下角和右下角,请向 footer
选择器中添加下面两行代码:
border-bottom-left-radius: 15px 30px; border-bottom-right-radius: 15px 30px;
对于所有单独的 border-radius 属性,第一个值等于定义角的椭圆的水平半径,第二个值则等于垂直半径。 下图对此进行了说明:
![利用 border-radius 属性,第一个值等于定义角的椭圆的水平半径,第二个值等于垂直半径 利用 border-radius 属性,第一个值等于定义角的椭圆的水平半径,第二个值等于垂直半径](http://i.msdn.microsoft.com/dynimg/IC485217.png)
还可将 border-radius 属性用作速记属性以在同一行中定义所有椭圆形圆角。 border-radius 属性中的值的顺序如下:
border-radius: ulx urx lrx llx / uly ury lry lly;
斜线(“/”)前面的值定义每个角的水平(或 x)轴,斜线后面的值定义垂直(或 y)轴。 此处,ulx 表示左上角的水平轴,urx 表示右上角的水平轴,依此类推。 另外,uly 表示左上角的垂直轴,ury 表示右上角的垂直轴,依此类推。 下图中演示了值的顺序。
![演示作为复合属性的 border-radius 属性和相应维度的图表 演示作为复合属性的 border-radius 属性和相应维度的图表](http://i.msdn.microsoft.com/dynimg/IC485220.png)
添加到 header
ID 选择器的以下行生成了相同的结果,如前所示:
border-radius: 50px 50px 0 0 / 25px 25px 0 0;
同样,添加到 footer
ID 选择器的以下行生成了与以前相同的结果:
border-radius: 0 0 15px 15px / 0 0 30px 30px;
使用其他浏览器生成圆角
由于 CSS3 仍是一个新兴标准,在撰写本文时,并非所有浏览器都同等程度地支持 border-radius 属性。 虽然一些旧版本的浏览器支持 border-radius 属性,但仅限于以其相应的供应商特定的前缀为开头的此类属性。 (若要了解有关供应商特定的前缀的更多信息,请参见 Internet Explorer 团队博客上的“Microsoft CSS 供应商扩展名。) 其他浏览器对于前面解释的斜线(“/”)符号的支持各不相同,有些浏览器对椭圆形(与圆形相对)边框提供有限的支持。
若要确保与旧版本浏览器的向后兼容性,您应参见相应的浏览器供应商网站。 根据浏览器和版本的不同,您可以只重复带相应的供应商特定的前缀的任何 border-radius 属性。 例如,在当前版本和早期版本的 Mozilla Firefox、Apple Safari、Google Chrome 和 Opera 中,以下选择器将在 Internet Explorer 9 中生成相同的圆角结果:
.my_selector { ... border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
但是,圆角越复杂,border-radius 语法的可转换性就越小。 在这种情况下,您应访问浏览器供应商的网站:
- Mozilla (Firefox): https://developer.mozilla.org
- WebKit(Safari、Chrome): http://developer.apple.com/devcenter/safari/
- Opera: http://www.opera.com/docs/specs/
汇总
请在此处查看在完成本主题中描述的所有更改后的 Fourth Coffee 页的新外观(添加了针对其他浏览器的供应商特定的属性名): 针对已更新页的HTML;针对已更新页的 CSS。
使用早期版本的 Internet Explorer 生成圆角
Internet Explorer 9 中新增了对 border-radius 属性的支持。 若要向您的布局添加圆角以便 Windows Internet Explorer 8 及早期版本的用户可查看它们,您可利用 Web 上提供的大量备用解决方案之一。 除了单个圆角解决方案之外,还存在包含与多个版本的 Windows Internet Explorer 和其他浏览器兼容的圆角解决方案的频繁更新列表的网站。
此处列出了几个用于聚合圆角解决方案的收藏网站。 (包含这些链接并不代表 Microsoft 认可链接网站。)
- CSS-Discuss Wiki,RoundedCorners: http://css-discuss.incutio.com/wiki/Rounded_Corners
- SmileyCat,CSS 圆角“Roundup”: http://www.smileycat.com/miaow/archives/000044.php
- CSS Juice,25 Rounded Corners Techniques with CSS: http://www.cssjuice.com/25-rounded-corners-techniques-with-css/
- Bing 搜索,"css rounded corners": http://www.bing.com/search?q=css+rounded+corners