css 深入理解

场景一、边框半透明,背景绿色

　　默认情况下背景会延伸到边框所在的下边

　　

　　css2 中我们只能接受  css3 中我们可以通过 background-clip 属性来实现 

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

　场景二、 多重边框

　　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;