CSS3.border-radius初解

标签：

border-radius: 1-4 length|% / 1-4 length|%;
这是W3School上对于border-radius的完整语法，但是注意，我们一般使用的时候，是不会写‘/‘右边的内容，那么浏览器会默认前后相等，所以我们会做出圆角边框

如果写出来，但不相等会如何呢？

div
{
width:300px;
height:100px;
background-color:#ff9900;
-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */
border-radius: 2em 1em 4em / 0.5em 3em;
}

可以看出，我们做出的是不规则的圆角。其中‘/‘之前的事水平半径，之后的是垂直半径。

上述代码中的"border-radius: 2em 1em 4em / 0.5em 3em;"就等价于

border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

CSS3.border-radius初解

标签：

原文地址：http://www.cnblogs.com/mrjblog/p/4604271.html