前面的話
邊框是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-radius
border-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;
<演示框>點擊下列相應屬性值可進行演示
【單側投影】
box-shadow: 0 5px 4px -4px black;
【鄰邊投影】
box-shadow: 3px 3px 6px -3px black;
【雙側投影】
box-shadow: 5px 0 5px -5px black,-5px 0 5px -5px black;
圖片邊框
圖片邊框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;
}
應用
【三道杠效果】
三道杠可以使用邊框來實現，上面兩道杠使用上邊框的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>