僞元素彩色多層邊框

當跟 CSS 選取器匹配的元素底下的內容要做些特殊處理時，就可以利用偽元素來幫我們做到一些效果，如邊框與背景圖。其中【::before】 在元素之前插入某些內容與【::after】在元素之後插入某些內容，在進階 CSS 效果中算是很特別的，而且製作 RWD 頁面上效果時也常可以用到。

首先新增類別【.color-border】設定邊框、圓角、與陰影，另需設定【position: relative;】以搭配::before 與::after 使用座標定位；z-index: -1; (確認在最底層)，並在<div>套用此類別。

繼續加入【.color-border::before】的設定，content: "";搭配display: block; (藉以產生空白區塊空間)position: absolute; top: 0px;left: 0px; right: 0px; bottom: 0px;( 使用座標定位出空間範圍)，邊框與圓角大小可適當調整安排，即可完成第二層邊框。

最後加入【.color-border::after】產生往內的第三層邊框，同樣繼續使用content: "";搭配display: block; (藉以產生空白區塊空間)，top: 5px;left: 5px; right: 5px; bottom: 5px;( 使用座標定位出空間範圍，值請與前一層邊框寬度相同)，並加上往內陰影box-shadow，邊框與圓角大小可適當調整安排，即可完成第三層邊框。

【檢視範例】【下載範例】

相關課程 : 精修DIV+CSS網頁排版設計輕鬆做