5.（高级）CS效果之：边框border

一、实现半透明边框

方法：

border:10px solid hsla(0,0%,100%,.5);

background:#fff;

background-clip:padding-box;

 

二、实现多重边框

方法一：box-shadow

background:yellowgreen;

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

说明

box-shadow中15px，由于之前10px被挡住，显示出来只有5px;

注意：

1、box-shadow不会影响布局，不受box-size的影响。

2、box-shadow不会影响鼠标事件，需要box-shadow设置inset来解决。