如何使用 CSS3 添加圆角圆角文本框, 圆

通过使用 层叠样式表 (CSS)，级别 3 (CSS3) 为布局元素生成圆角，可以美化网站的外观。 本主题演示了通过使用 Windows Internet Explorer 9 中的新圆角内置支持让您的网站布局更具吸引力的几个基本方法。 它包含以下几部分：

 

• 起点
• 生成全部相同的圆角
• 分别生成多个圆角
• 使用椭圆生成圆角
• 使用其他浏览器生成圆角
• 汇总
• 使用早期版本的 Internet Explorer 生成圆角
• 相关主题

起点

对于本主题中描述的任务，我们从最基本的网页开始操作。 该页是一家虚拟的咖啡公司的网页，其中包括一些 HTML、一些 层叠样式表 (CSS) 和几个图像。 可以查看并下载 HTML 和 CSS。 下面的屏幕快照显示了初始网页。

 

要点  

在创建您自己的网页以利用 Internet Explorer 9 中引入的新 Web 标准支持时，请确保在页面顶部包括以下 !DOCTYPE 指令：

这将确保 Internet Explorer 9 使用最新的标准支持在“Internet Explorer 9 标准模式”中呈现您的页面。 有关详细信息，请参阅定义文档兼容性。

与许多其他布局一样，在此布局中，框有助于以可视方式分隔内容，并提供视觉吸引力。 同样，此布局完全是平直的。 不过，可利用 Internet Explorer 9 和 CSS3 为这些框生成圆角。

Internet Explorer 9 中使用 CSS3 生成的圆角非常可靠，并且这些圆角有很多种可能的组合。 在本主题中，我们将重点说明示例布局的三个区域，如下图中的突出显示部分所示：

• 咖啡豆缩略图图像的边框（由 product_thumb 类选择器定义）
• 靠页面右侧的边栏（由 sidebar ID 选择器定义）
• 靠页面顶部和底部的黄色标题带区（由 header 和 footer ID 选择器定义）

生成全部相同的圆角

我们将从咖啡豆缩略图开始操作，为其提供略微平滑的角。 若要为框生成全部相同的圆角，请为 border-radius 属性指定一个值。 （该值可以是一个长度值或一个百分比；百分比基于总高度或宽度。 本主题中的所有示例都使用长度值。） 若要以其最简单的形式使用此属性，请指定用于定义框的每个角的形状的圆圈的半径。 在下面的图像中，已将 20 像素的 border-radius 应用于矩形。 请记住圆圈定义角的曲线的方式。

当前，定义缩略图外观的 CSS 为下面的类选择器：

这使得每个缩略图在 Internet Explorer 9 中都按以下方式显示：

下面添加 border-radius 属性，并为其分配一个 5 像素的值。 可通过将以下行添加到 product_thumb 类选择器执行此操作：

在将此行添加到选择器后，咖啡豆的所有边框将如下所示：

分别生成多个圆角

现在我们将注意力转到边栏上。 当前，定义边栏外观的 CSS 为下面的 ID 选择器：

这使得边栏在 Internet Explorer 9 中按以下方式显示：

通过使用下列两种方法之一，可使用比其他角更宽的曲线生成左上方圆角。 第一种方法将使用其他 border-radius 属性之一。

border-radius 属性如下：

• border-top-left-radius： 定义框的左上角。
• border-top-right-radius： 定义框的右上角。
• border-bottom-right-radius： 定义框的右下角。
• border-bottom-left-radius： 定义框的左下角。

我们可以使用这些属性中的某些属性填充边栏左上角处的空白区域，并向边栏的下部添加一些有吸引力的曲线。

下面向 sidebar ID 选择器中添加以下行：

向该选择器中添加这些行后，边栏将如下所示：

还可通过将 border-radius 属性用作一个速记属性，分别生成边栏的各个圆角。 如果您为 border-radius 属性输入多个值，则每个角的曲线随值的顺序的不同而不同。 例如，通过将以下行添加到选择器，可在边栏示例中实现相同的结果：

 

border-radius 属性中的值的顺序如下：

 

此处，ul 表示左上角、ur 表示右上角、lr 表示右下角、ll 表示左下角。 上述任一值的长度值为零都意味着未生成任何曲线；角仍为直角。 下图中演示了值的顺序。

对于不同的结果，我们也可以仅将两个值或三个值用于 border-radius 属性。 您可以自己尝试一下此操作。 有关此属性的行为的详细解释，请参阅 MSDN 上的 border-radius 属性参考页。

使用椭圆生成圆角

目前，我们仅使用了由圆圈定义的圆角。 border-radius 属性也可创建由椭圆定义的角，具有不同的 x（水平）和 y（垂直）半径。

下面我们使用两个椭圆来生成由 header ID 选择器定义的框的两个顶部圆角，以及由 footer ID 选择器定义的框的两个底部圆角。

我们需要使用椭圆来定义标头的左上角和右上角，因此向 header 选择器中添加下面两行代码：

 

若要使用椭圆定义页脚的左下角和右下角，请向 footer 选择器中添加下面两行代码：

 

对于所有单独的 border-radius 属性，第一个值等于定义角的椭圆的水平半径，第二个值则等于垂直半径。 下图对此进行了说明：

还可将 border-radius 属性用作速记属性以在同一行中定义所有椭圆形圆角。 border-radius 属性中的值的顺序如下：

 

斜线（“/”）前面的值定义每个角的水平（或 x）轴，斜线后面的值定义垂直（或 y）轴。 此处，ulx 表示左上角的水平轴，urx 表示右上角的水平轴，依此类推。 另外，uly 表示左上角的垂直轴，ury 表示右上角的垂直轴，依此类推。 下图中演示了值的顺序。

添加到 header ID 选择器的以下行生成了相同的结果，如前所示：

 

同样，添加到 footer ID 选择器的以下行生成了与以前相同的结果：

 

使用其他浏览器生成圆角

由于 CSS3 仍是一个新兴标准，在撰写本文时，并非所有浏览器都同等程度地支持 border-radius 属性。 虽然一些旧版本的浏览器支持 border-radius 属性，但仅限于以其相应的供应商特定的前缀为开头的此类属性。 （若要了解有关供应商特定的前缀的更多信息，请参见 Internet Explorer 团队博客上的“Microsoft CSS 供应商扩展名。） 其他浏览器对于前面解释的斜线（“/”）符号的支持各不相同，有些浏览器对椭圆形（与圆形相对）边框提供有限的支持。

若要确保与旧版本浏览器的向后兼容性，您应参见相应的浏览器供应商网站。 根据浏览器和版本的不同，您可以只重复带相应的供应商特定的前缀的任何 border-radius 属性。 例如，在当前版本和早期版本的 Mozilla Firefox、Apple Safari、Google Chrome 和 Opera 中，以下选择器将在 Internet Explorer 9 中生成相同的圆角结果：

 

但是，圆角越复杂，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