CSS3：邊框屬性

前言

學習這些CSS屬性並非要本身要設計多好看的樣式，而是看到網上的代碼能看得懂。

效果

本章將圍繞以下效果進行解釋：

border

• border-width: 邊框寬度。
• border-style: 邊框樣式。
• border-color: 邊框的顏色，當設爲 transparent 時表示透明。
• 一塊兒設置：border: <width> <style> <color>

outline

• 輪廓屬性，不佔空間，位於邊框的外部。
• outline-width: 輪廓的寬度。
• outline-style: 輪廓的樣式。
• outline-color: 輪廓的顏色。
• 一塊兒設置：outline: <width> <style> <color>
• outline-offset: 輪廓的偏移。
• 查看"圖b5"，該圖形既添加了border屬性又添加了outline屬性，實現了雙邊框效果。

border-radius(邊框半徑)

• border-top-left-radius: 左上角邊框。
• border-top-right-radius: 右上角邊框。
• border-bottom-right-radius: 右下角邊框。
• border-bottom-left-radius: 左下角邊框。
• 一塊兒設置：border-radius:<top-left> <top-right> <bottom-right> <bottom-left>
• 瀏覽器兼容：加上-webkit-或-moz-
• 每一個圓角能夠 分別設置水平半徑和垂直半徑
  • border-radius:<水平半徑> / <垂直半徑>
  • border-*-radius: <水平半徑> <垂直半徑>
• 圖"b1"使用border-radius屬性一次性對4個角設置了不一樣的半徑。
• 圖"b2"對每一個角設置了不一樣的水平半徑和垂直半徑。
• 圖"b3"經過設置border-radius:50%畫出了一個圓形。
• 圖"b4"使用border-radius畫出了一個「檸檬形狀」。
• 圖"b8"畫出了當width和height爲0時border的狀態。

box-shadow(陰影)

•  box-shadow:<h-shadow> <v-shadow> <blur> <spread> <color> [inset]
  • h-shadow: 水平偏移。
  • v-shadow: 垂直偏移。
  • blur: 模糊距離。若是不設置此值，則陰影不會模糊。
  • spread：陰影擴張的尺寸。
  • color: 陰影顏色。
  • inset: 內部陰影。默認值是outset，表示外部陰影。
• 圖"b6"實現了模糊陰影。
• 圖"b7"利用box-shadow實現了多層邊框。

參考文獻

[1] 重溫CSS:Border屬性：http://www.cnblogs.com/yanhaijing/p/3527259.html

[2] CSS 邊框：http://www.w3school.com.cn/css/css_border.asp