CSS（五）- 背景與邊框 - 邊框圓角與陰影基礎用法

擴展閱讀

本文僅僅作border的基礎使用，想要深刻了解的話能夠戳如下幾個連接，以爲做者寫的很好。

CSS Backgrounds and Borders Module Level 3

CSS魔法堂：重拾Border之——解構Border

CSS魔法堂：重拾Border之——不單單是圓角

CSS魔法堂：重拾Border之——圖片做邊框

邊框

border

border-width、border-style、border-color

border:style：dotted（點）、dashed（虛線）、solid（實線）、double（雙線輪廓）、其它3D

邊框半徑：圓角

經過如下屬性設置四個角的半徑：

border-radius

border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius

現在只有IE8（及更早版本的IE）和Opera Mini不支持border-radius屬性。

建立正圓和膠囊形狀

在給boeder-radius指定百分比時，x軸和y軸分別相對於元素的寬度和高度來計算實際值。換句話說，咱們很容易把一個正方形的元素變成圓形，只要把圓角半徑設置成至少50%就好。

同時，元素形狀改變會改變元素的可點擊區域，會以變化後的圓角爲基準。

咱們能夠下圖中左邊的圓，輕輕鬆鬆實現了圓形頭像的功能。😄

若是咱們想要實現「長圓形」（一個矩陣的兩端各帶一個半圓形，見上圖），百分比和的絕對值都沒法實現，除非咱們知道元素的大小。但咱們能夠故意指定一個比所需半徑大的值，獲得：

border-radius:999em

邊框圖片

關於邊框圖片，有不少待研究的，好比如何分割、平鋪等等。具體可參考：https://www.w3.org/TR/css-backgrounds-3/#border-images

border-image:圖像路徑 分割方式 邊框厚度 邊框背景圖的擴展 平鋪方式

border-image-source、border-image-slice``border-image-width、border-image-outset、border-image-repeat

邊框陰影

box-shadow:陰影水平偏移值 陰影垂直偏移值 陰影模糊值 陰影外延值 陰影的顏
（以上值都可爲負，而且最後能夠加上 inset表示是內陰影）

邊框屬性表