大家看到這個(gè)div，想想自己如何去實(shí)現(xiàn)
然后看下代碼
<div class="d1"></div>
.d1{
height:50px;
width:50px;
background:hsla(0,100%,50%,0.4);
border:10px solid hsla(50,50%,80%,0.6);
padding:20px;
background-clip:content-box;
}
使用一個(gè)div就可以實(shí)現(xiàn)
中間紅色為content內(nèi)容，白色為padding內(nèi)邊距，外面的米黃色為border邊框
這里會(huì)用到hsla來表示顏色的方法
HSL色彩模式是工業(yè)界的一種顏色標(biāo)準(zhǔn)，是通過對色調(diào)(H)、飽和度(S)、亮度(L)三個(gè)顏色通道的變化以及它們相互之間的疊加來得到各式各樣的顏色的，HSL即是代表色調(diào)，飽和度，亮度三個(gè)通道的顏色，這個(gè)標(biāo)準(zhǔn)幾乎包括了人類視力所能感知的所有顏色，是目前運(yùn)用最廣的顏色系統(tǒng)之一。HSLA是在HSL的基礎(chǔ)上增加一個(gè)透明度(A)的設(shè)置。
然而我們的重點(diǎn)是在background-clip這個(gè)CSS3屬性
官方的解釋為background-clip 屬性規(guī)定背景的繪制區(qū)域，屬性值為有border-box,padding-box,content-box
好了我們分別看下效果
改變上面的css為border-box
這時(shí)候我們發(fā)現(xiàn) content內(nèi)容的顏色會(huì)繼續(xù)衍生到padding 和border去，
所以當(dāng)值為border-box時(shí)，background的值會(huì)對邊寬和邊框內(nèi)的所有部分都有效
當(dāng)使用padding-box時(shí)
他的background的顏色只會(huì)填充到padding 不會(huì)再衍生到border去，
當(dāng)使用content-box為第一張圖的效果
--》所以background-clip這個(gè)屬性會(huì)對background影響的范圍起作用。
而當(dāng)影響不到padding的顏色時(shí)，padding會(huì)成透明色 ，看下面例子
<body>
<div class="d2">
<div class="d1"></div>
</div>
</body>
body{
background:green;
}
.d1{
height:50px;
width:50px;
background:hsla(0,100%,50%,0.4);
border:10px solid hsla(50,50%,80%,0.6);
padding:20px;
background-clip:content-box;
}
.d2{
width:200px;
height:200px;
background:yellow;
}
這里還有一個(gè)background-origin屬性，他是對背景圖片有效，而background-origin 屬性規(guī)定 background-position 屬性相對于什么位置來定位，以哪里個(gè)位置作為0,0起始位位置
