cs2-半透明边框

1.1 css中半透明颜色 rgba() hsla(0%, 3%,100%，.5)

   回退方案 背景提供一个半透明背景图片，其他属性只能回退到实色

 

1.2 头部边框 白色背景

<div>111</div>

body{
  background:#000;
}
div{
  border:10px solid hsla(0,0%,100%,.3);
  background:#fff; 
  background-clip:padding-box;
  /* 默认border-box 背景在边框下面，改变值后会用内边距把外背景的外沿裁掉 */
}

1.3 多重边框 box-shadow 接收第四个参数：扩张半径（正负）控制投影面积

<div class="borders1">111</div>
<div class="outline">222</div>

.borders1{
  margin: 50px;
  background:yellowgreen;
  box-shadow:0 0 0 10px #655,0 0 0 20px red;
}
.outline{
  margin:50px;
  background:yellowgreen;
  border:10px solid #655;
  border-radius:5px;
  outline:10px solid deeppink;
  /* outline描边 圆角bug */ 
}

 

 1.4 灵活的背景定位