浅谈CSS3 Border-radius属性

01-29 次

标签 border-radius

CSS3 border-radius属性建立在基本的CSS border属性之上，并可以使元素的4个角变为圆角。border-radius属性可以使用任何一个CSS单位来做为值。所有的最新版现代浏览器，包括IE、Chrome 和 Opera都支持border-radius属性。在一些老的浏览器上，需要使用浏览器厂商前缀来支持该属性。

下面举个例子，HTML结构如下：

<div id="bestanime">
    <h3>Top Three Anime DVDs</h3>
    <ol>
        <li>Ghost In The Shell</li>
        <li>Spirited Away</li>
        <li>Akira</li>
    </ol>
</div>

你可以像下面这样使用border-radius来使div元素变为圆角：

div#bestanime { border: 5px double #000; border-radius: 20px; }

border-radius可以单独将每一个角指定为圆角：

div#bestanime { border: 5px double #000; border-radius-topright: 30px; }

注意，在一些老的浏览器上，语法可能有些不同，在这些浏览器上不仅仅要添加厂商前缀，还要增加回退代码：

div#bestanime { 
    border: 5px double #000;
    -moz-border-radius-topright: 30px;
    -webkit-border-top-right-radius: 30px
    border-radius-topright: 30px; 
}

一些提示资源

我们也可以给border-radius设置不同的高度和宽度，这样圆角就不是完美的半圆形，而是一个椭圆形。

div#bestanime { border: 5px double #000; border-top-left-radius: 75px 60px; }

注意box-shadow属性要收border-radius属性的影响。还要注意border-radius的两个值不要设置的相差太多，例如设置为60px 3px将不会得到预期的结果：第一个值影响元素的左上和右下角，第二个值影响元素的右上和左下角。（注意，一些老的浏览器可能解析的结果是错误的）

如果元素的边框设置得很细和颜色对比度较高时，在设置一个很大的border-radius属性，在老的浏览器上看起来就会有一些变形。这些缺陷在最新版的浏览器中都得到了解决。

下面是两个border-radius方面的资源：