CSS3的奇技淫巧/border與border-radius構成的奇異圖形

一、border

border 簡寫屬性在一個聲明設置全部的邊框屬性。

屬性值：
border-width:規定邊框的寬度;
取值：
thin:定義細的邊框。
medium:默認。定義中等的邊框。
thick:定義粗的邊框。
length:容許您自定義邊框的寬度。經常使用，本身設置寬度大小。
inherit:規定應該從父元素繼承邊框寬度。

border-style:規定邊框的樣式;
取值：
none:定義無邊框。
hidden:與 "none" 相同。不過應用於表時除外，對於表，hidden 用於解決邊框衝突。
dotted:定義點狀邊框。在大多數瀏覽器中呈現爲實線。 用過。
dashed:定義虛線。在大多數瀏覽器中呈現爲實線。經常使用。
solid:定義實線。經常使用
double:定義雙線。雙線的寬度等於 border-width 的值。
groove:定義 3D 凹槽邊框。其效果取決於 border-color 的值。
ridge:定義 3D 壟狀邊框。其效果取決於 border-color 的值。
inset:定義 3D inset 邊框。其效果取決於 border-color 的值。
outset:定義 3D outset 邊框。其效果取決於 border-color 的值。
inherit:規定應該從父元素繼承邊框樣式。

border-color:規定邊框的顏色;
取值：
color_name:規定顏色值爲顏色名稱的邊框顏色（好比 red）。
hex_number:規定顏色值爲十六進制值的邊框顏色（好比 #ff0000）。
rgb_number:規定顏色值爲 rgb 代碼的邊框顏色（好比 rgb(255,0,0)）。
transparent:默認值。邊框顏色爲透明。有用。
inherit:規定應該從父元素繼承邊框顏色。

二、border-radius

border-radius屬性是一個簡寫屬性，用於設置四個 border-*-radius 屬性。
border-radius的取值：
length:定義圓角的形狀。應該是圓角弧度的大小。
%:以百分比定義圓角的形狀。

三、使用純css實現三角形圖標

原理就是利用四個邊線的分界線之間的倒角來生成三角形。

以下樣式表
<div id = "test"></div>
<style type="text/css">
    #test{
        width: 100px;
        height: 100px;
        border-top: 40px solid #0f0;
        border-right: 40px solid #ff0000;
        border-left: 40px solid #ffff00;
        border-bottom: 40px solid #000;
    }
</style>
爲了便於區分，讓四個邊界的顏色不同。內容大小也先不爲0，符合日常使用的樣式。

設置內容區域爲0;(width:0;height:0)結果以下圖

若是設置上、右、下的顏色爲跟背景相同的顏色||transparent(透明)，或者設置上下與背景相同||transparent(透明)，右邊框爲none;結果就是一個三角形，別的方向上的三角形也是同理。

#test{
    width: 0px;
    height:0px;
    border-top: 40px solid transparent;
    border-right: 40px solid transparent;
    border-left: 40px solid #ffff00;
    border-bottom: 40px solid transparent;
}

右上角圖像。

#test {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-left: 100px solid transparent; 
　　/*只有兩個邊框的時候，交線爲左上到右下*/
}

或者能夠改變四個邊線的寬度，或者隱藏，生成本身須要的樣式。

#test{
    width: 0px;
    height:0px;
    border-top: 40px solid #ff00ff;
    border-right: 100px solid #ff0000;
    border-left: 400px solid #00ff00;
    border-bottom: 40px solid #00ffff;
}

四、使用border-radius構造有趣圖形邊框

通常常見的應用（正方形的內容），如圖1
<div id = "test"></div>
<style type="text/css">
#test{
    width: 100px;
    height:100px;
    background-color:#ffff00;
    border:1px solid #000;
    border-radius:20px;
}

圓形邊框，設置border-radius大於等於0.5倍的正方形的寬高，如圖2
#test{
    width: 100px;
    height:100px;
    background-color:#ffff00;
    border:1px solid #000;
    border-radius:50px;
}

邊角不相等，如圖3
#test{
    width: 100px;
    height:100px;
    background-color:#ffff00;
    border:1px solid #000;
    border-radius:40px 20px;//表示左上和右下使用同一個值（前一個），右上角和左下角使用第二個值。
}

圖一、    圖二、圖三、

四個邊角都不同的時候和四個邊角的不一樣方向的也不同的時候。

以下，如圖4
<div id = "test"></div>
<style type="text/css">
#test{
    width: 100px;
    height:100px;
    background-color:#ffff00;
    border:1px solid #000;
    border-radius:40px 30px 20px 10px;/*水平與垂直的大小相等，依次是左上，右上，右下，左下*/
}
</style>

以下，如圖5
<div id = "test"></div>
<style type="text/css">
#test{
    width: 100px;
    height:100px;
    background-color:#ffff00;
    border:1px solid #000;
    /*第一組表示水平半徑，第二組表示垂直半徑*/
    border-radius:40px 30px 50px 10px / 15px 25px 35px 45px;
}
</style>

圖四、 圖五、

設置單個角的弧度

border-top-left-radius: 50px;

圖六、

半圓 

<div id="circle"></div>
<style type="text/css">
    #circle{
    width: 200px;
    height: 100px;
    background: #ffff00;
    border-radius: 100px 100px 0 0;
}
</style>

五、結合起來使用的效果

效果1
<div id = "test"></div>
<style type="text/css">
#test{
    width:0;
    height:0;
    border:100px solid gray;
    border-radius:100px;
    border-right-color:#fff;
}
</style>

效果2
#test{
    height:100px;
    width:200px;
    background: red;
    border-radius:100px/50px;
}

效果3
<div id = "test"></div>
<style type="text/css">
#test{
    height:100px;
    width:100px;
    border-radius:90px;/*此時，這個半徑應該以邊框的外邊來計算，因此此時的寬高應該是180px*/
    border-top: 40px solid #ff00ff;
    border-right: 40px solid #ff0000;
    border-left: 40px solid #00ff00;
    border-bottom: 40px solid #00ffff;
}
</style>

/*效果4，放大鏡圖標*/
<div id="circle"></div>
<style type="text/css">
    #circle{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 5px solid #333;
        position: relative;
    } #circle::after {
        content: '';
        display: block;
        width: 8px;
        height: 60px;
        border-radius: 5px;
        background: #333;
        position: absolute;
        right: -22px;
        top: 38px;
        transform: rotate(-45deg);
    }
</style>

六、attr和content

好比咱們要實現一個懸浮提示的功能。傳統方法，使用title屬性就能實現，可是如今咱們要更美觀，能夠使用css3提供的attr：可以在css中獲取到元素的某個屬性值，而後插入到僞元素的content中去。 

<div id = "attr" data-title="hello, world">hello...</div>
<style type="text/css">
    #attr{
        margin: 200px 0 0 200px;/*只是爲了便於觀察*/
        position: relative;
    }
    #attr:hover::after { content: attr(data-title); /*取到data-title屬性的值*/
        display: inline-block;
        padding: 10px 14px;
        border: 1px solid #ddd;
        border-radius: 5px;
        position: absolute;
        top: -50px;
        left: -30px;
    }
</style>

 

七、radial-gradient

屬性漸變

div.chrome {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    box-shadow: 0 0 4px #999, 0 0 2px #ddd inset;
    background: radial-gradient(circle, #4FACF5 0, #2196F3 28%, transparent 28%),
    radial-gradient(circle, #fff 33%, transparent 33%),
    linear-gradient(-50deg, #FFEB3B 34%, transparent 34%),
    linear-gradient(60deg, #4CAF50 33%, transparent 33%),
    linear-gradient(180deg, #FF756B 0, #F44336 30%, transparent 30%),
    linear-gradient(-120deg, #FFEB3B 40%, transparent 40%),
    linear-gradient(-60deg, #FFEB3B 30%, transparent 30%),
    linear-gradient(0deg, #4CAF50 45%, transparent 45%),
    linear-gradient(60deg, #4CAF50 30%, transparent 30%),
    linear-gradient(120deg, #F44336 50%, transparent 50%),
    linear-gradient(180deg, #F44336 30%, transparent 30%);
}