簡單邊框有三個關鍵屬性: border-width、border-style和border-color。
基本邊框屬性
屬性說明
border-width
設定邊框的寬度
border-style
設定繪製邊框使用的樣式
border-color
設定邊框的顏色
border-width
: 5px;
border-style
: solid;
border-color
: black;
border-width屬性的取值可能是常規css長度值，可能是邊框繪製區域寬度的百分數，也可能是三個快捷值中的任意乙個。邊框寬度預設值是medium。值說明
《長度值》
將邊框寬度值設為以css度量單位（如em、px、cm）表達的長度值
《百分數》
將邊框寬度值設為邊框繪製區域的寬度的百分數
thin
將邊框寬度設為預設寬度，這三個值的具體意義是由瀏覽器定義的，不過，所有瀏覽器中這三個值代表的寬度依次增大
medium
thick
2、定義邊框樣式
border-style屬性的值可以是下面任意乙個。預設是none,就是沒有邊框。值說明
none
沒有邊框
dashed
破折線式邊框
dotted
圓點線式邊框
double
雙線式邊框
groove
糟線式邊框
inset
使元素內容具有內嵌效果的邊框
outset
使元素內容具有外凸效果的邊框
ridge
脊線邊框
solid
實線邊框
如果border-color屬性值設為black，一些瀏覽器在應用雙色邊框樣式（如inset和outset )的時候會出現問題。這些瀏覽器中就有谷歌chrome，兩種顏色都會使用黑色，最終的呈現效果相當於實線邊框。聰明一點兒的瀏覽器知道使用灰度，比如firefox。為了實現圖19-1中的效果(用的是chrome )，我將groove、inset、outset和ridge樣式的border-color屬性值設為了grayo
3、為一條邊應用邊框樣式
border-top-width定義是頂邊，top替換成bottom,left,right
4、使用border簡寫屬性
屬性說明
border
設定所有邊框
border-top
設定一條邊的邊框
border-bottom
border-left
border-right
可以在一行中指定寬度、樣式、顏色的值從而為這些屬性設定值，用空格隔開。
border
: medium solid black;
可以使用邊框的radius特性建立圓角邊框。
屬性說明
值border-top-left-radius
設定乙個園角
一對長度值或百分數值,百分數跟邊框盒子的寬度和高度相關
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius
border-radius
一次設定四個角的簡寫屬性
一對或四對長度值或百分數值，由/字元分割
指定兩個半徑值即可定義乙個圓角，採用長度值和百分數值均可。第乙個值指定水平曲線半徑，第二個值指定垂直曲線半徑。百分數值是相對於元素盒子的寬度和高度來說的。
border-raidus
: 20px / 20px; 四個角都應用這一對值
border-raidus
: 50% 20px 25% 5em / 50% 20px 25% 5em;分別設定四對值
邊框不僅限於用border-style屬性定義的樣式，我們可以使用影象為元素建立真正的自定義邊框。配置影象邊框各個方面的屬性有5個，外加乙個可以在一條宣告中配置所有特徵的簡寫屬性。
屬性說明
值border-image-source
設定影象**
none或者url（影象）
border-image-slice
設定切分影象的偏移
1~4個長度值或者百分數,受影象的寬度和高度影響
border-image-width
設定影象邊框的寬度
auto或1~4個長度值或者百分數
border-image-outset
指定邊框影象向外擴充套件的部分
1~4個長度值或者百分數
border-image-repeat
設定影象填充邊框區域的模式
stretch、repeat和round中的乙個或兩個值
border-image
在一條宣告中設定所有值的簡明屬性
跟單個屬性的值一樣
1)切分影象
指定瀏覽器使用，有的瀏覽器可能不支援。
-webkit-border-image
:url(test.png) 30 / 50px;
-moz-border-image
:url(test.png) 30 / 50px;
-o-border-image
:url(test.png) 30 / 50px;
2）控制切分圖重複方式
上面 ，為了填滿邊框的整個空間，切分圖被拉伸了。我們可以改變影象重複方式，得到不同的呈現效果。border-image-repeat屬性就能實現這個功能，不過，使用簡寫屬性也能指定重複樣式。值說明
stretch
拉伸切分圖填滿整個空間，預設值
repeat
平鋪切分圖填滿整個空間（可能導致被截斷)
round
在不截斷切分圖的情況下，平鋪切分圖並拉伸以填滿整個空間
space
在不截斷切分圖的情況下，平鋪切分圖並在之間保留一定的間距以填滿整個空間
-moz-border-image
:url(test.png) 30 / 50px round repeat;
CSS 邊框樣式
簡寫 border color width style 所有的簡寫,一經使用,所有省略的值都會採用預設值 屬性 color,width,style border 方向 屬性 簡寫 border 方向 color width style 四邊圓角 border radius px 或 單邊圓角 bor...
CSS邊框樣式
圓角邊框 border top left radius 40px 左上角 border bottom left radius 40px 左下角 border top right radius 20px 右上角 border bottom right radius 10px 右下角 border bo...
CSS 邊框樣式
本節我們來學習邊框樣式，主要包括如何設定邊框的寬度 邊框的顏色 邊框的樣式等。當我們給某個元素設定邊框時，可以分為上下左右四個邊框，既可以同時設定四個邊框的樣式，也可以分開設定四個邊框的樣式。關於邊框樣式的四個屬性 屬性描述 border width 設定邊框的寬度 border style 設定邊...