一切福田,不離方寸,從心而覓,感無不通。

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

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

 

起点

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

初始网页的屏幕快照。

 

要点  

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

 

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

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

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

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

本主题讨论如何向突出显示的区域添加圆角

生成全部相同的圆角

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

矩形上的 border-radius 的演示

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

 

这使得每个缩略图在 Internet Explorer 9 中都按以下方式显示:具有原始样式的缩略图图像

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

 

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

border-radius 属性设置为 5 像素的缩略图图像

分别生成多个圆角

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

 

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

具有原始样式的边栏

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

border-radius 属性如下:

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

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

 

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

左上角、右下角和左下角的 border-radius 分别设置为 10 ems、5 ems 和 2 ems 的边栏

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

 

 

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

 

 

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

演示具有多个值的 border-radius 属性的图示

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

使用椭圆生成圆角

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

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

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

 

 

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

 

 

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

利用 border-radius 属性,第一个值等于定义角的椭圆的水平半径,第二个值等于垂直半径

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

 

 

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

演示作为复合属性的 border-radius 属性和相应维度的图表

添加到 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 语法的可转换性就越小。 在这种情况下,您应访问浏览器供应商的网站:

汇总

请在此处查看在完成本主题中描述的所有更改后的 Fourth Coffee 页的新外观(添加了针对其他浏览器的供应商特定的属性名): 针对已更新页的 HTML;针对已更新页的 CSS

使用早期版本的 Internet Explorer 生成圆角

Internet Explorer 9 中新增了对 border-radius 属性的支持。 若要向您的布局添加圆角以便 Windows Internet Explorer 8 及早期版本的用户可查看它们,您可利用 Web 上提供的大量备用解决方案之一。 除了单个圆角解决方案之外,还存在包含与多个版本的 Windows Internet Explorer 和其他浏览器兼容的圆角解决方案的频繁更新列表的网站。

此处列出了几个用于聚合圆角解决方案的收藏网站。 (包含这些链接并不代表 Microsoft 认可链接网站。)