CSS Border屬性圖文詳解！[多圖]

作為網頁設計者來說，css border是大家最為熟悉不過了，但是嗨客小編就來給大家說說還有你不知道的一些css border知識吧：

不僅可以用CSS3來創建圓角，使用原有CSS一樣可以顯示自定義圖形。

這是正確的（有待考究）；在過去，沒發現這種技術之前，我們可能使用背景圖像定位來顯示一個園或箭頭。幸運的是，我們能放下PS圖象處理軟件了。

基礎

你可能很熟悉邊的最基本用法。

border: 1px solid black;

上麵的代碼將給元素應用1px的邊。即簡潔又簡單；但我們也可以稍作修改。

border-width: thick; border-style: solid; border-color: black;

除了指定具體的邊框寬度值，也可以使用這三個關鍵詞：thin，medium 和 thick。

雖然乍看起來單個屬性的方式沒必要，但有極少數的情況下，當它是有利的，例如當你需要在特定的事件發生時更新邊的部分屬性。

也許你需要在用戶將鼠標懸停在一個特定的元素上時改變這個元素的邊框顏色。使用複合屬性需要重複像素值和邊的樣式。

box{border:1px solid red; }.box:hover{border:1px solidGreen; }

一個更優雅的和簡潔（DRY，don't repeat yourself）的做法是隻更新邊的顏色屬性。

.box{border:1px solid red; }.box:hover{border-color:green; }