二、边框

 边框的技巧

一、半透明边框

　　

　　background-color: yellow;

　　border: 10px solid rgba(0,0,0,.1)；

　　background-clip: padding-box;　　//对背景进行裁剪，否则背景色会从边框下面透上来。

 

二、多重边框

　　1、使用阴影模拟多个边框

　　　

　　　background-color: pink; 

　　　　box-shadow: 0px 0px 0px 10px #888888,0px 0px 0px 15px yellow;

　　　但是添加阴影并不会更改元素的宽高，所以必要时需要添加maging来模拟边框。

　　2、使用轮廓模拟两个边框

　　　

　　　background-color: yellow;

　　　border: 5px solid #ccc;

　　　outline: red dotted 5px;

　　

三、边框内圆角

　　1、复合使用阴影和轮廓（边框设圆角，加上轮廓，中间的间隙通过阴影来填充）

　　　

　　　background: tan;

　　　border-radius: .8em;

　　　padding: 1em;

　　　box-shadow: 0 0 0 .6em #655;

　　　outline: .6em solid #655;

四、边框做切角

　　

　　border: 20px solid transparent;

　　border-image: 1 url('data:image/svg+xml,\<svg xmlns="http://www.w3.org/2000/svg" width="3" height="3" fill="%2358a">\<polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2"/>\</svg>');

　　background: #333;

　　background-clip: padding-box;　　//对背景进行裁剪，否则会透上来