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

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

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

起点

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

要点

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

复制

<!DOCTYPE html>

这将确保 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 为下面的类选择器：

复制

.product_thumb {
  clear: left;
  height: 80px;
  width: 80px;
  margin-right: 10px;
  padding: 5px;
  float: left;
  border-width: 1px;
  border-color: #7f7f7f;
  border-style: dashed;
}

这使得每个缩略图在 Internet Explorer 9 中都按以下方式显示：如何使用 CSS3 添加圆角圆角文本框

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

复制

  border-radius: 5px;

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

分别生成多个圆角

现在我们将注意力转到边栏上。当前，定义边栏外观的 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 中按以下方式显示：

通过使用下列两种方法之一，可使用比其他角更宽的曲线生成左上方圆角。第一种方法将使用其他 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 属性用作一个速记属性，分别生成边栏的各个圆角。如果您为 border-radius 属性输入多个值，则每个角的曲线随值的顺序的不同而不同。例如，通过将以下行添加到选择器，可在边栏示例中实现相同的结果：

复制

  border-radius: 10em 0 5em 2em;

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

复制

  border-radius: ul ur lr ll;

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

对于不同的结果，我们也可以仅将两个值或三个值用于 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 属性中的值的顺序如下：

复制

border-radius: ulx urx lrx llx / uly ury lry lly;

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

添加到 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

秒客网