1.給一個容器設置一層白色背景和一道半透明白色邊框。

思路：實際是設置的背景會延伸到邊框所在的區域的下層，可以通過background-clip屬性調整背景的默認行為。

background-clip 屬性：背景的繪制區域

值描述

border-box	背景被裁剪到邊框盒
padding-box	背景被裁剪到內邊距框
content-box	背景被裁剪到內容框

border: 20px solid hsla(0, 0%, 100%, .5); background: #fff; background-clip: padding-box;

2. 多重邊框實現

box-shadow 方案

思路：利用box-shadow的第四個參數（擴張半徑）指定正負值，讓投影面積加大或減小。一個正值的擴張半徑加上兩個為零的偏移量以及為零的模糊值，得到的投影像一道實線邊框。優點：可以獲得更多層邊框；貼合border-radius屬性產生圓角。缺點：只能描繪直線一種樣式。

box-shadow 屬性：向框添加一個或多個陰影。支持逗號分割語法，我們可以創建任意數量的投影。box-shadow是層層疊加的，第一層投影位于最頂層，依次類推。因此，需要按規律調整擴張半徑。

值描述

h-shadow	必需。水平陰影的位置。允許負值
v-shadow	必需。垂直陰影的位置。允許負值
blur	可選。模糊距離
spread	可選。陰影的尺寸
color	可選。陰影的顏色
inset	可選。將外部陰影 (outset) 改為內部陰影

box-shadow: h-shadow v-shadow blur spread color inset; background: yellowgreen; box-shadow: 0 0 0 10px #655,0 0 0 15px deeppink,0 2px 5px 15px rgba(0, 0, 0, .5);

注意：

投影的行為不會影響布局，也不會收到box-sizing屬性的影響。不過可以通過內邊距或外邊距來額外模擬出邊框所需要占據的空間。

投影出現在元素的外圈，不會響應鼠標事件，比如懸停或點擊。你可以給box-shadow屬性加上inset關鍵字，使投影繪制在元素的內圈，此時需要增加額外的內邊距來騰出足夠的空隙。

outline 方案

思路：只需要兩層邊框，可以先設置一層常規邊框，再加上outline（描邊）屬性產生外層邊框。優點：邊框樣式十分靈活。缺點：只適用于雙層邊框的場景；邊框不一定會貼合border-radius屬性產生的圓角。

outline屬性：是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用。

值描述

outline-color	規定邊框的顏色
outline-style	規定邊框的樣式
outline-width	規定邊框的寬度

background: yellowgreen; outline: 5px solid deeppink;

設置box-radius值效果：

通過設置outline-offset屬性控制它與元素邊緣之間的距離

background: #485152; outline: 1px dashed #fff; outline-offset: -10px;

3. 針對容器某個角對背景圖片做偏移定位

background-position 的擴展語法方案

總結

以上是生活随笔為你收集整理的《CSS揭秘》-背景与边框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。