一, 背景與邊框
1. 當我們div背景色是白色,然后我們想給這個div加上一個白色半透明的邊框的時候發現這個邊框怎么不存在?
看不見半透明邊框
看見半透明邊框
其實這個邊框是實際存在的,只不過在設置邊框的時候,背景會被邊框壓下去,也就是說平時我們看到的邊框實際上是加在背景上面的如果邊框顏色與背景色不一樣那我們能很快辨別出來,像上面用同樣的顏色但是不一樣的透明度來體現的話需要給div設置一個background-clip,其值是padding-box; 這樣瀏覽器就會用內邊距的外沿把背景剪裁掉。
div{
background: #fff;
border: 3px solid rgba(255, 255, 255, 0.5);
background-clip: padding-box;
}
2. 多重邊框
其實在沒有發現多重邊框之前我想達到這種效果都是div一個個嵌套,不像現在這樣簡單便捷就寫出來
解決方案是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);
}