你以為border-radius隻是圓角嗎？【各種角度】

　　border-radius，國内翻譯成圓角，你可能以為這個屬性就是用來畫圓角，沒錯，但是除此之外，它還可以做點别的事情。

　　radius其實指的是邊框所在圓的半徑，這個CSS3屬性不僅能夠建立圓角，還可以建立橢圓角（如下圖），把這些角按照不同的順序和大小來展現，能夠繪制成多種多樣的圖形。以下圖例就是通過定義border-radius得到的效果。

　　主要在于要了解水準半徑和垂直半徑：有斜杠，則斜杠前表示水準半徑長度，斜杠後表示垂直半徑高度；無斜杠，表示水準半徑和垂直半徑一樣。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            margin:100px auto;
            width:400px;
           height:200px;
           border-radius:200px/100px;
            background:red;
        }
    </style>
</head>
<body>
<div></div>
</body>
<html>

　　border-radius可以通過值來定義樣式相同的角，也對每個角分别定義。下面的表格解釋了各個寫法所表示的效果。

1、border-radius:10px 将建立四個大小一樣的圓角

div{
    margin:100px auto;
    width:200px;
    height:200px;
    border-radius:100px;
    background:red;
}

2、border-radius:10px 15px 10px 5px; 四個值分别表示左上角、右上角、右下角、左下角。

　　四個值分别表示四個角的半徑（水準和垂直半徑一樣）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            margin:100px auto;
            width:200px;
            height:200px;
            border-radius:100px 150px 100px  50px;
            background:red;
        }
    </style>
</head>
<body>
<div></div>
</body>
<html>

3、border-radius:10px 15px; 第一個值表示左上角、右下角；第二個值表示右上角、左下角。

div{
    margin:100px auto;
    width:200px;
    height:200px;
    border-radius:100px 50px;
    background:red;
}

4、border-radius:10px 15px 5px; 第一個值表示左上角；第二個值表示右上角、左下角；第三個值表示右下角。

div{
    margin:100px auto;
    width:200px;
    height:200px;
    border-radius:100px 150px 50px;
    background:red;
}

5、border-radius:20px/10px; 寫橢圓角的時候，可以用短寫法，建立四個一樣的橢圓角。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            margin:100px auto;
            width:200px;
            height:200px;
            border-radius:100px/50px;
            background:red;
        }
    </style>
</head>
<body>
<div></div>
</body>
<html>

紅色矩形處就是：水準半徑100和垂直半徑50

6、border-radius:10px 20px 30px 40px/20px 50px 30px 10px; 斜杠前面的一組四個值分别表示四個角的水準半徑；斜杠後面的一組四個值分别表示四個角的垂直半徑。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            margin:100px auto;
            width:200px;
            height:200px;
            border-radius:20px 40px 60px 80px/10px 30px 50px 70px;
            background:red;
        }
    </style>
</head>
<body>
<div></div>
</body>
<html>

7、border-radius:10px 20px 40px/20px 50px 斜杠前面和後面每一組分别表示的是四個角水準半徑和四個角垂直半徑。兩個值、三個值的順序規則你懂的哈，跟上面一樣的

div{
    margin:100px auto;
    width:200px;
    height:200px;
    border-radius:10px 20px 40px/20px 50px;
    background:red;
}

　　border-radius可以用來制作很生動的效果。相容Firefox老的版本，為了相容Firefox3.6及以下版本，需要寫上供應商字首，為-moz-border-radius:5px，對于每個角的文法，則為：-moz-border-radius-topleft:5px;要特别注意這與标準寫法不同。