An Experiment in Rounded Corners

今天下午突然有了一个想法，那就是在Internet Explorer中一定有简单的实现圆角的方式。不幸的是，我开始的想法完全失败了，跟以前一样在同样的地方停了下来。然而，我想试一下 VML 。VML是一个基于XML的方式，并且Microsoft已经推荐给了 W3C 。

要使VML可用的语法真的很沉重。你必须为 VML 元素定义一个 behavior ，包含 VML namespace ，然后使用VML语法。是不是很奇怪它没有被web developers热衷。

下面的代码包含了 VML namespace 然后声明了前缀 prefix  v 来使用所有 VML元素。

<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v" />

使用VML的 roundrect 元素可以支持圆角矩形。下面是基本的语法，我让它包含一些基本的内容。注意前缀 v:prefix 。

<v:roundrect arcsize=".02" fillcolor="#000">

Lorem ipsum dolor sit amet, consectetuer adipiscing

</v>

圆角矩形有许多属性，包括这里用到的 arcsize 和 fillcolor 。不幸的是，不知道怎么通过 CSS 来声明 fill color ，这使得你得在两个独立的地方定义 fill color 。如果你想使用背景图片，你需要查看 VML 的 fill 。

arcsize 与元素的 element size 相关，很不幸，因为 box 的大小可能不同。

最后，我们需要一些CSS来使 VML 生效。

v\:roundrect {

behavior: url(#default#VML);

}

接下来，让这个元素的样式可以在其他浏览器中使用 (在IE中可能会表现的稍微差一点)。

v\:roundrect {

color: #FFF;

display: block;

background-color: #000;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

border-radius: 10px;

padding: 20px;

height: 100%;

/* IE-specific */

behavior:url(#default#VML);

/background-color: transparent;

}

所有浏览器都认识这个不寻常的元素，字体颜色被设置了，元素被设置为 display: block 。Border-radius把它设置为圆角。最重要的是，我使用了 IE hack 把背景色去掉。否则，你将得到一个圆角黑盒子，下面是一个方形的黑盒子。换句话说，就是一个 方盒子。

(你可以把 hack 放在独立的文件中，通过条件注释引入，我这里是为了简单才在这用 hack。)

最后一点注意，这在IE8下不会生效，但是可以在IE5到IE7中使用。

Feel free to check out the demo page.

原文地址：

http://snook.ca/archives/html_and_css/rounded_corners_experiment_ie/