一， 背景與邊框

1. 當(dāng)我們div背景色是白色，然后我們想給這個(gè)div加上一個(gè)白色半透明的邊框的時(shí)候發(fā)現(xiàn)這個(gè)邊框怎么不存在？

看不見(jiàn)半透明邊框

看見(jiàn)半透明邊框

其實(shí)這個(gè)邊框是實(shí)際存在的，只不過(guò)在設(shè)置邊框的時(shí)候，背景會(huì)被邊框壓下去，也就是說(shuō)平時(shí)我們看到的邊框?qū)嶋H上是加在背景上面的如果邊框顏色與背景色不一樣那我們能很快辨別出來(lái)，像上面用同樣的顏色但是不一樣的透明度來(lái)體現(xiàn)的話需要給div設(shè)置一個(gè)background-clip，其值是padding-box; 這樣瀏覽器就會(huì)用內(nèi)邊距的外沿把背景剪裁掉。

div{
  background: #fff;
  border: 3px solid rgba(255, 255, 255, 0.5);
  background-clip: padding-box;
}

2. 多重邊框

其實(shí)在沒(méi)有發(fā)現(xiàn)多重邊框之前我想達(dá)到這種效果都是div一個(gè)個(gè)嵌套，不像現(xiàn)在這樣簡(jiǎn)單便捷就寫出來(lái)
解決方案是box-shadow的多重邊框

多重邊框

div{
  box-shadow: 0 0 0 10px #fff,
              0 0 0 15px #dedede,
              0 2px 5px 15px rgba(0, 0, 0, 0.5); 
}