《CSS揭祕》-背景與邊框

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);

注意：

1. 投影的行爲不會影響佈局，也不會收到box-sizing屬性的影響。不過能夠經過內邊距或外邊距來額外模擬出邊框所須要佔據的空間。
2. 投影出如今元素的外圈，不會響應鼠標事件，好比懸停或點擊。你能夠給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 的擴展語法方案