css3 邊框記

時間 2019-11-11

標籤 css3 css 邊框欄目 CSS 简体版

原文原文鏈接

css3 邊框

　　border屬性在css1中就已經定義了，使用它能夠設置元素的邊框風格，邊框顏色以及邊框粗細。css

　　border-width:設置元素邊框的粗細。
　　border-color:設置元素邊框的顏色。
　　border-style:設置元素邊框的類型。html

　　在實際運用中能夠將上面3個屬性合併起來，簡寫爲：
　　border:border-width border-color border-style;css3

　　還能夠爲不一樣的邊設置不一樣的樣式，其規則遵循上右下左循序。瀏覽器

　　由於border-width與border-color有默認的樣式，能夠省略，可是border-style必定要寫，不然不會顯示邊框樣式,經常使用的有實線「solid」，虛線「dashed」，點狀線「dotted」等。佈局

border-color

　　border-color屬性在css3加強了，它能夠爲元素邊框設置更多的顏色。url

border-color:[<color> | transparent{1,4} | inherit

　　border-color的語法看上去和css1中的徹底相同，若是使用border-color這種縮寫語法，將不會有任何效果，必須將這個border-color標準寫法拆成四個邊框，使用多種顏色才行。spa

border-top-colors:[<color> | transparent{1,4} | inherit
border-left-colors:[<color> | transparent{1,4} | inherit
border-bottom-colors:[<color> | transparent{1,4} | inherit
border-left-colors:[<color> | transparent{1,4} | inherit

　　注意：color是負數colors。
<!DOCTYPE html>3d

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>   
    div{
        width:100px;
        height:100px;
        border:10px solid;
        -moz-border-top-colors:red yellow blue green red yellow blue green red yellow;
        -moz-border-right-colors:red yellow blue green red yellow blue green red yellow;
        -moz-border-bottom-colors:red yellow blue green red yellow blue green red yellow;
        -moz-border-left-colors:red yellow blue green red yellow blue green red yellow;            
    }     
</style>
</head>
<body>
<div></div>
</body>
</html>

　　border-color屬性的參數其實很簡單，就是顏色值。當border-color只設置一個顏色值時，效果和css1中的border-color同樣。只有設置了n個顏色值，而且邊框寬度也爲n像素，就可使用css3的border-color屬性設置n個顏色，每種顏色顯示1像素的寬度，若是寬度值大於顏色數量的值，最後一種顏色用於顯示剩下的寬度。code

border-image

　　css3增添了一個圖片邊框(border-image)的屬性，可以模擬出background-image屬性的功能。cdn

border-image:none | <image> [<number> | <percentage>]{1,4} [/ <border-width>{1,4}]? [stretch | repeat | round]{0,2}

　　爲了簡單理解，俺們把上面屬性分解爲四個子屬性(在實際中必須按照標準玩)。它們分別是：
　　引入背景圖片：border-image-soure
　　切割引入背景圖片：border-image-slice
　　邊框背景圖片的寬度：border-image-width
　　邊框背景圖片的排列方式：border-image-repeat

border-image-source

border-image-source:url(image url)

　　border-image-source跟background-image屬性類似，也是經過url()來調用背景圖片，圖片的路徑能夠是相對地址，也能夠是絕對地址，默認值是none。

border-image-slice

border-image-slice:[<number> | <percentage>]{1,4} && fill ?

　　border-image-slice是用來分解引入進來的背景圖片。
　　取值支持像素與百分比，其中像素不須要添加單位，由於默認單位就是像素，百分比即相對於邊框背景圖片而言的，例如邊框圖片的大小是300px X 240px,取百分比爲25%，30%，15%，20%，他們實際對應的效果就是剪切了(從外到裏)圖片的60px,90px,36px,60px四邊的大小(遵循上右下左循序）。fill從字面上說就是填充的意思，若是使用這個關鍵詞時，圖片邊界的中間部分將保留下來。默認狀況爲空。

border-image-width

border-image-width:[<length> | <percentage> | <number> | auto]{1,4}

　　用來設置邊框背景圖片的顯示大小，理解爲border-width來用。

border-image-repeat

border-image-repeat:[stretch | repeat | round]{1,2}

　　用來指定邊框背景圖片的排列方式，stretch拉伸，repeat重複，round平鋪，其默認值爲stretch。它最多隻接受兩個參數值，第一個值表示水平方向的排列方式，第二個值表示垂直方向的排列方式。當取一個值時，表示水平和垂直方向的排列方式相同。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>   
    div{
        width:200px;
        height:200px;
    /*剪切了圖片四個方向各27px，並設置邊框大小爲27px，水平方向平鋪，垂直方向拉伸*/    
        -moz-border-image:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2d_gVdFXXXXcLXXXXXXXXXXXX_!!2406102577.png) 27 27 27 27/27px round stretch;           
    }     
</style>
</head>
<body>
    <div></div>
</body>
</html>

border-radius

　　css3專門針對元素的圓角效果增長了一個圓角屬性border-radius。

border-radius:none | <length> {1,4}[/<length>{1,4}] ?

　　border-radius是一種縮寫方法。若是設置反斜槓符號「/」，則反斜槓前面的值是元素圓角的水平方向半徑，後面的是垂直方向半徑，若是省略，則水平與垂直半徑同樣。
　　none:默認值，表示元素沒有圓角。
　　<length>:由浮點數字和單位標識符組成的長度值。不能夠是負值。
　　注意:如要要重置元素沒有圓角，取值none並沒有效果，須要將值設爲0。
　　border-radius能夠將各個角單獨拆分出來。

/*定義元素左上角圓角*/   
border-top-left-radius:<length>/<length>    
/*定義元素右上角圓角*/   
border-top-right-radius:<length>/<length> 
/*定義元素右下角圓角*/   
border-bottom-right-radius:<length>/<length> 
/*定義元素左下角圓角*/   
border-bottom-left-radius:<length>/<length>

　　
　　
圓

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>   
    div{
        width:100px;
        height:100px;    
        background:#808080;
        /*半徑是寬度的一半*/
        border-radius:50%;              
    }     
</style>
</head>
<body>
<div></div>
</body>
</html>

半圓

div{
    width:100px;
    height:50px;    
    background:#808080;
    /*定義左上角與右上角的半徑爲寬度的一半*/
    border-radius:50px 50px 0 0;              
}

扇形

div{
    /*寬高半徑同樣，只設置一邊*/
    width:100px;
    height:100px;    
    background:#808080;
    border-radius:100px 0 0 0;              
}

橢圓

div{
    width:100px;
    height:50px;    
    background:#808080;
    /*水平半徑等於寬，垂直半徑等於高*/
    border-radius:100px/50px;              
}

box-shadow

　　box-shadow也是css3新增的一個重要屬性，用來定義元素的盒子陰影。

box-shadow:none | [<length> <length> <length>?<length>? || <color>] [,<length> <length> <length>?<length>? || <color>]+

　　能夠簡寫爲：

box-shadow:none | [inset x-offset y-offset blur-radius spread-radius color],[inset x-offset y-offset blur-radius spread-radius color]

　　box-shadow屬性可使用一個或多個投影，中間用逗號「，」隔開。
　　none:默認值，元素沒有任何陰影效果。
　　inset:陰影類型，可選值。若是不設置，默認的投影方式是外陰影，若是設置爲inset，就是投影爲內陰影。
　　x-offset:陰影水平偏移量，其值能夠是正負值。若是取正值，則陰影在元素的右邊；若是取負值，則陰影在元素的左邊。
　　y-offset:陰影垂直偏移量，其值能夠是正負值。若是取正值，則陰影在元素的下邊；若是取負值，則陰影在元素的上邊。
　　blur-radius:陰影模糊半徑，可選參數。只能爲正值，若是取值爲0，表示陰影不具備模糊效果，值越大，陰影的邊緣越模糊。
　　spread-radius:陰影擴展半徑，可選參數。其值能夠是正負值，若是取值爲正值，則整個陰影都擴大，負值縮小。
　　color:陰影顏色，可選參數，若是不設定任何顏色，瀏覽器會取默認色。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>   
    div{
        width:100px;
        height:50px;    
        border:1px solid #808080;
        border-radius:10px;
        /*水平與垂直偏移量爲正值，陰影在元素右邊與下邊，黑色*/
        box-shadow:2px 2px 0 0 black;              
    }     
</style>
</head>
<body>
    <div></div>
</body>
</html>

　　陰影太濃，咱們添加陰影模糊半徑。

div{
    width:100px;
    height:50px;    
    border:1px solid #808080;
    border-radius:10px;
    box-shadow:2px 2px 5px 0 black;              
}

　　陰影模糊半徑不僅模糊了陰影邊緣，整個元素都籠罩在陰影模糊半徑之下，咱們再添加陰影擴展半徑，設置負值，使模糊半徑縮小。

div{
    width:100px;
    height:50px;    
    border:1px solid #808080;
    border-radius:10px;
    box-shadow:2px 2px 5px -3px black;              
}

　　只設置模糊半徑與顏色。

div{
    width:100px;
    height:50px;    
    border:1px solid #808080;
    border-radius:10px;
    box-shadow:0 0 10px 0 red;              
}

　　只設置擴展半徑與顏色。

div{
    width:100px;
    height:50px;    
    border:1px solid #808080;
    border-radius:10px;
    box-shadow:0 0 0 3px red;              
}

　　擴展半徑相似邊框效果，但不一樣的是，陰影並不在文檔流中，因此不會改變佈局。陰影能夠設置多個，所以咱們能夠藉助陰影擴展半徑製做相似多邊框顏色的效果。

div{
    width:100px;
    height:50px;   
    border:1px solid #808080;
    border-radius:10px;
    box-shadow:0 0 0 3px red,
           0 0 0 6px yellow,        
               0 0 0 9px blue,  
           0 0 0 12px green;              
}

　　內陰影效果

div{
    width:100px;
    height:50px;   
    border:1px solid #808080;
    border-radius:10px;
    box-shadow:inset 2px 2px 2px 0 black;                      
}

　　內陰影的陰影方向與外陰影的陰影方向相反，內陰影水平偏移量取正值時在左邊，負值時在右邊，垂直偏移量取正值時在上邊，負值時在下邊。

　　多層陰影效果

div{
    width:100px;
    height:50px;   
    border:1px solid #808080;
    border-radius:10px;
    box-shadow:2px 2px 2px red,
           4px 4px 2px yellow,
           6px 6px 2px blue,        
           8px 8px 2px green;                      
}

　　css3邊框完，然箇中奧妙，卻不止

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。