理解CSS邊框border

標籤：漸層   左右   log   使用   pre   文本   垂直   slice   comment   

前面的話

??邊框是CSS盒模型屬性中默默無聞的一個普通屬性，CSS3的到來，但得邊框屬性重新煥發了光彩。本文將詳細介紹CSS邊框

 

基礎樣式

??邊框是一條以空格分隔的集合樣式，包括邊框粗細(邊框寬度)、邊框顏色和邊框樣式，且先後順序無關

    border: border-width border-color border-style    border: 1px solid red;

【邊框樣式】

??如果一個邊框沒有樣式，邊框將根本不會存在

??關於虛線dashed，在chrome/firefox下，虛線寬高比是3/1；而在IE下，虛線寬高比為2/1。所以在IE下虛線顯得比較密

??關於點線dotted，在chrome下，點線是方點；而在IE/firefox下，點線是圓點

border-style:none(預設)border-style:hidden/dotted/dashed/solid/double/groove/ridge/inset/outset(共9種)

【邊框寬度】

??邊框的寬度不能為負，不能指定為百分比值。這是因為，邊框並不會因為裝置尺寸變大，所以百分比單位並不符合語義。類似地，還有outline、box-shadow、text-shadow等

??邊框寬度支援3個關鍵字：this/medium/thick，分別是1px、3px、5px，且medium為預設值。medium為3px是因為邊框樣式double至少為3px為有效果

    border-width: thin/medium(預設)/thick/<length>

【邊框顏色】

??預設的邊框顏色是元素本身的前景色彩，即元素的文本顏色；如果元素沒有任何文本，則邊框顏色是其父元素的文本顏色。但是，在表格中，若只設定border-style，而不設定border,則邊框顏色為黑色，而不與文本顏色相同。類似地，還有text-shadow、box-shadow等

    border-color: transparent/<color>

??[注意]在CSS2.1中，背景定位background-position只能相對於左上方定位。如果需要是相對於右側，則可以使用一個右側的透明邊框來實作類別似的效果

??<示範框>點擊下列相應屬性值可進行示範

 

邊框要點

【注意事項】

??邊框有以下幾個要點需要特別注意：

??1、邊框繪製在元素背景之上，如果邊框樣式有某種縫隙，可以通過這些縫隙看到元素的背景(有相容問題)

??2、同一元素的邊框相交處是斜線，可以用邊框實現三角形

??3、行內元素的上下邊框由於不影響行高，不影響布局；左右邊框會影響布局

??4、在CSS2.1中，背景定位background-position只能相對於左上方定位。如果需要是相對於右側，則可以使用一個右側的透明邊框來實作類別似的效果

【邊框單邊】

        border-top/border-right/border-bottom/border-left

【邊框屬性】

    border-width:        border-top-width    border-right-width        border-bottom-width    border-left-width    border-style:        border-top-style    border-right-style        border-bottom-style    border-left-style    border-color：        border-top-color    border-right-color        border-bottom-color    border-left-color

【四值順序】

    border-width: 1px 2px 3px 4px;//上右下左    border-width: 1px 2px 3px;//上(左右)下    border-width: 1px 2px;//(上下)(左右)    border-width: 1px;//(上下左右)

 

多色邊框

??多色邊框border-colors可以在一條邊框上設定多種顏色

??[注意]只有firefox支援，需要加-moz-首碼，且只能四條邊分開寫，否則無效

    border-colors:<color><color>……    border: 10px solid black;    -moz-border-top-colors: red green;    -moz-border-right-colors: green yellow;    -moz-border-bottom-colors: yellow blue;    -moz-border-left-colors: blue red;    

圓角邊框

??圓角邊框border-radius可以為邊框設定圓角(IE8-不支援)，四值順序是左上、右上、右下、左下

border-radius: none(預設)border-radius: <length>{1,4}[/<length>{1,4}]?//如果反斜線存在，前面的值是水平方向的半徑，後面的值是垂直方向的半徑。如果沒有則水平和垂直方向相等

??關於圓角邊框有如下注意事項：

??1、<length>可以是具體值，也可以是百分比，但不是負數

??2、重設border-radius沒有圓角，使用none無效，需要取值0

??3、border-radius對<img>沒有任何效果

??4、如果取值為百分比，水平方向圓角百分比相對於寬度，垂直方向圓角百分比相對於高度

【圓角單角】

border-top-left-radius/border-top-right-radius/border-bottom-right-radius/border-bottom-left-radiusborder-top-left-radius: 10px 20px;

??[注意]寫圓角單角時不可加/

【四值順序】

??四值順序是左上、右上、右下、左下

border-radius: 10px 20px 30px 40px / 20px 30px 40px 50px;

【內徑外徑】

??border-radius內徑 = 外徑 - 對應的邊框寬度

??當border-radius半徑值小於等於邊框寬度時，元素沒有內徑效果

【特殊圖形】

圓形

??元素的寬高相同，且圓角半徑為寬高的一半

div{    width: 100px;    height: 100px;    border-radius: 50%;}

半圓

??元素寬高不同，且圓角半徑與寬高要配合

div{    width: 100px;    height: 50px;    border-radius: 50px 50px 0 0;}

扇形

??元素寬高及一個圓角半徑相同

div{    width: 50px;    height: 50px;    border-radius: 50px 0 0 0;}    

橢圓

??元素寬高不同，且水平和垂直半徑分別對應寬高

div{    width: 120px;    height: 80px;    border-radius: 120px/80px;}            

 

盒子陰影

??盒子陰影box-shadow可以為元素設定陰影(IE8-不支援)

box-shadow: none(預設)box-shadow: (h-shadow v-shadow blur spread color inset)+;h-shadow: 水平陰影位置(必須)v-shadow: 垂直陰影位置(必須)blur:     模糊距離(可選)spread:   陰影尺寸(可選)color:    陰影顏色，預設和文本顏色一致(可選)inset:    內部陰影(可選)    box-shadow:10px 10px red,20px 20px blue;

??使用盒子陰影box-shadow時，有如下幾點注意事項：

??1、可以使用多重陰影，但使用過多會造成效能差

??2、邊框在內陰影之上，內陰影在背景圖片之上，背景圖片在背景色之上，背景色在外陰影之上

??3、內陰影對<img>元素沒有任何效果

??4、最先寫的陰影在最頂層

??5、該屬性與border-radius一脈相承，若通過border-radius設定為圓角，則box-shadow的最終呈現也將是圓角

【類比邊框】

box-shadow: 0 0 0 10px blue;

??<示範框>點擊下列相應屬性值可進行示範

 

圖片邊框

??圖片邊框border-image可以在邊框位置設定圖片(IE10-不支援)

border-image: none(預設)border-image: border-image-source || border-image-slice [ / border-image-width? | / border-image-outset ]? || border-image-repeat;

??[注意]該屬性的作用是用來替代border-style的，若border-image為none，則顯示border-style的值

border-image: url(‘img.img‘) 27 fill / 27 / 27px repeat;

【border-image-source】

??邊框的圖片路徑

border-image-source:url(‘test.img‘);

【border-image-slice】

??圖片邊框四條切割線的位置

border-image-slice:  <number> | <percentage> fill

??使用border-image-slice時，有如下幾點注意事項：

??1、若不寫單位，具體值預設單位是px

??2、fill表示圖片邊框的中間部分將保留下來

??3、四值方向是上右下左，代表切割線的方向，切割的分別是高寬高寬

??4、圖片邊框是在邊框範圍內顯示的，若邊框寬度不等於slice切片值，則圖片邊框會按比例放大縮小，以使圖片邊框正好顯示在邊框範圍內

??5、若slice值為負，或大於盒子的寬度或高度會被100%，四個角將顯示整個背景圖片

??6、若右切和左切大於盒子寬度，則上中和下中部分為空白；若上切和下切大於盒子高度，則左中和右中部分為空白

【border-image-width】

??邊框寬度border-image-width。若指定該值，則邊框圖片寬度由該值確定，否則由盒子的邊框寬度來確定。該值可以用具體像素、數字(表示幾倍)以及百分比來表示，遵循四值順序

border-image-width: <length> | <percentage> | <number> | auto  

【border-image-outset】

??border-image-outset表示邊框映像地區超出邊框的量，可以用具體像素和數字(表示幾倍)表示，遵循四值順序

border-image-outset:0(預設)border-image-outset: <length> | <number>

【border-image-repeat】

??邊框圖片的相片順序

border-image-repeat: stretch(展開,預設) | repeat(重複) | round(平鋪) [1,2]//第一個值表示水平方向的相片順序，第二個值表示垂直方向的相片順序

??在上面的屬性值中，repeat是邊框中間向兩端平鋪，可能造成兩端邊緣被切的現象；而round會對邊框背景圖的切片進行縮放，使其正好顯示

【按鈕實現】

div{    display: inline-block;    border-image: url(‘button.png‘) 16 fill/ auto / 5px;}

應用

【三道杠效果】

&emsp;&emsp;三道杠可以使用邊框來實現，上面兩道杠使用上邊框的double樣式，下面一道杠使用下邊框的solid樣式<style>.box{    color: red;    width: 60px;    height: 10px;    border-top: 30px double;    border-bottom: 10px solid;    transition: color 0.5s;}.box:hover{    color:pink;}</style><div class="box"></div>

【十字效果】

<style>.box{    position: relative;    color: blue;    border: 4px solid;    width: 40px;    height: 40px;    transition: color 0.2s;}.box:before{    content:"";    border-top:10px solid;      display: block;    position: absolute;    width: 30px;    top:15px;    left:5px;}.box:after{    content:"";    position: absolute;    top: 5px;    left: 15px;    border-left:10px solid;    height: 30px;} .box:hover{    color: lightblue;}</style><div class="box"></div>

【信封效果】

??可以使用圖片邊框border-image來實現航空信封的效果。圖片邊框使用線性漸層來實現

<style>.box {  width: 200px;  height: 100px;  padding: 10px;  border: 10px solid;  border-image: repeating-linear-gradient(-225deg, red 0, red 10px, transparent 10px, transparent 20px, #58a 20px, #58a 30px, transparent 30px, transparent 40px) 20;}</style><div class="box" contenteditable ="true">請修改文字</div>    

理解CSS邊框border