css 深刻理解

場景1、邊框半透明,背景綠色

　　默認狀況下背景會延伸到邊框所在的下邊

　　

　　css2 中咱們只能接受  css3 中咱們能夠經過 background-clip 屬性來實現 

border: 10px solid hsla(0,0%,100%,.5);
background: white;
background-clip: padding-box;

　場景2、 多重邊框

　　box-shaow :投影方案  支持"," 分隔 多重投影

background: yellowgreen;
box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;

　　outline 方案

background: yellowgreen;
border: 10px solid #655;
outline: 5px solid deeppink;

　　背景定位的擴展方案

background: url(code-pirate.svg) no-repeat #58a;
background-position: right 20px bottom 10px;