CSS邊框border

邊框是CSS盒模型屬性中默默無聞的一個(gè)普通屬性，CSS3的到來，但得邊框?qū)傩灾匦聼òl(fā)了光彩。本文將詳細(xì)介紹CSS邊框

基礎(chǔ)樣式

邊框是一條以空格分隔的集合樣式，包括邊框粗細(xì)(邊框?qū)挾?、邊框顏色和邊框樣式，且先后順序無關(guān)

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

【邊框樣式】

如果一個(gè)邊框沒有樣式，邊框?qū)⒏静粫?huì)存在

關(guān)于虛線dashed，在chrome/firefox下，虛線寬高比是3/1；而在IE下，虛線寬高比為2/1。所以在IE下虛線顯得比較密

關(guān)于點(diǎn)線dotted，在chrome下，點(diǎn)線是方點(diǎn)；而在IE/firefox下，點(diǎn)線是圓點(diǎn)

border-style:none(默認(rèn))
border-style:hidden/dotted/dashed/solid/double/groove/ridge/inset/outset(共9種)

【邊框?qū)挾取?/p>

邊框的寬度不能為負(fù)，不能指定為百分比值。這是因?yàn)?，邊框并不?huì)因?yàn)樵O(shè)備尺寸變大，所以百分比單位并不符合語義。類似地，還有outline、box-shadow、text-shadow等

邊框?qū)挾戎С?個(gè)關(guān)鍵字：this/medium/thick，分別是1px、3px、5px，且medium為默認(rèn)值。medium為3px是因?yàn)檫吙驑邮絛ouble至少為3px為有效果

    border-width: thin/medium(默認(rèn))/thick/<length>

【邊框顏色】

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

    border-color: transparent/<color>

[注意]在CSS2.1中，背景定位background-position只能相對(duì)于左上角定位。如果需要是相對(duì)于右側(cè)，則可以使用一個(gè)右側(cè)的透明邊框來實(shí)現(xiàn)類似的效果

<演示框>點(diǎn)擊下列相應(yīng)屬性值可進(jìn)行演示

邊框要點(diǎn)

【注意事項(xiàng)】

邊框有以下幾個(gè)要點(diǎn)需要特別注意：

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

2、同一元素的邊框相交處是斜線，可以用邊框?qū)崿F(xiàn)三角形

3、行內(nèi)元素的上下邊框由于不影響行高，不影響布局；左右邊框會(huì)影響布局

4、在CSS2.1中，背景定位background-position只能相對(duì)于左上角定位。如果需要是相對(duì)于右側(cè)，則可以使用一個(gè)右側(cè)的透明邊框來實(shí)現(xiàn)類似的效果

【邊框單邊】

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

【邊框?qū)傩浴?/p>

    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可以在一條邊框上設(shè)置多種顏色

[注意]只有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可以為邊框設(shè)置圓角(IE8-不支持)，四值順序是左上、右上、右下、左下

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

關(guān)于圓角邊框有如下注意事項(xiàng)：

1、<length>可以是具體值，也可以是百分比，但不是負(fù)數(shù)

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

3、border-radius對(duì)<img>沒有任何效果

4、如果取值為百分比，水平方向圓角百分比相對(duì)于寬度，垂直方向圓角百分比相對(duì)于高度

【圓角單角】

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

[注意]寫圓角單角時(shí)不可加/

【四值順序】

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

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

【內(nèi)徑外徑】

border-radius內(nèi)徑 = 外徑 - 對(duì)應(yīng)的邊框?qū)挾?/p>

當(dāng)border-radius半徑值小于等于邊框?qū)挾葧r(shí)，元素沒有內(nèi)徑效果

【特殊圖形】

圓形

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

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

半圓

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

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

扇形

元素寬高及一個(gè)圓角半徑相同

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

橢圓

元素寬高不同，且水平和垂直半徑分別對(duì)應(yīng)寬高

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

盒子陰影

盒子陰影box-shadow可以為元素設(shè)置陰影(IE8-不支持)

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

使用盒子陰影box-shadow時(shí)，有如下幾點(diǎn)注意事項(xiàng)：

1、可以使用多重陰影，但使用過多會(huì)造成性能差

2、邊框在內(nèi)陰影之上，內(nèi)陰影在背景圖片之上，背景圖片在背景色之上，背景色在外陰影之上

3、內(nèi)陰影對(duì)<img>元素沒有任何效果

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

5、該屬性與border-radius一脈相承，若通過border-radius設(shè)置為圓角，則box-shadow的最終呈現(xiàn)也將是圓角

【模擬邊框】

box-shadow: 0 0 0 10px blue;

<演示框>點(diǎn)擊下列相應(yīng)屬性值可進(jìn)行演示

圖片邊框

圖片邊框border-p_w_picpath可以在邊框位置設(shè)置圖片(IE10-不支持)

border-p_w_picpath: none(默認(rèn))
border-p_w_picpath: border-p_w_picpath-source || border-p_w_picpath-slice [ / border-p_w_picpath-width? | / border-p_w_picpath-outset ]? || border-p_w_picpath-repeat;

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

border-p_w_picpath: url('img.img') 27 fill / 27 / 27px repeat;

【border-p_w_picpath-source】

邊框的圖片路徑

border-p_w_picpath-source:url('test.img');

【border-p_w_picpath-slice】

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

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

使用border-p_w_picpath-slice時(shí)，有如下幾點(diǎn)注意事項(xiàng)：

1、若不寫單位，具體值默認(rèn)單位是px

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

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

4、圖片邊框是在邊框范圍內(nèi)顯示的，若邊框?qū)挾炔坏扔趕lice切片值，則圖片邊框會(huì)按比例放大縮小，以使圖片邊框正好顯示在邊框范圍內(nèi)

5、若slice值為負(fù)，或大于盒子的寬度或高度會(huì)被100%，四個(gè)角將顯示整個(gè)背景圖片

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

【border-p_w_picpath-width】

邊框?qū)挾萣order-p_w_picpath-width。若指定該值，則邊框圖片寬度由該值確定，否則由盒子的邊框?qū)挾葋泶_定。該值可以用具體像素、數(shù)字(表示幾倍)以及百分比來表示，遵循四值順序

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

【border-p_w_picpath-outset】

border-p_w_picpath-outset表示邊框圖像區(qū)域超出邊框的量，可以用具體像素和數(shù)字(表示幾倍)表示，遵循四值順序

border-p_w_picpath-outset:0(默認(rèn))border-p_w_picpath-outset: <length> | <number>

【border-p_w_picpath-repeat】

邊框圖片的排列方式

border-p_w_picpath-repeat: stretch(拉伸,默認(rèn)) | repeat(重復(fù)) | round(平鋪) [1,2]//第一個(gè)值表示水平方向的排列方式，第二個(gè)值表示垂直方向的排列方式

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

【按鈕實(shí)現(xiàn)】

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

應(yīng)用

【三道杠效果】

&emsp;&emsp;三道杠可以使用邊框來實(shí)現(xiàn)，上面兩道杠使用上邊框的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-p_w_picpath來實(shí)現(xiàn)航空信封的效果。圖片邊框使用線性漸變來實(shí)現(xiàn)

<style>.box {  width: 200px;  height: 100px;  padding: 10px;  border: 10px solid;  border-p_w_picpath: 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">請(qǐng)修改文字</div>