一、实现半透明边框
方法：
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来解决。
缺点：
不能模拟虚线边框
方法二：outline
background:#655;
outline:1px dashed #fff;
outline-offset: -10px;
说明
outline-offset控制outline到元素边缘的位置通过设置: -10px;
缺点：
1、只适用于双边框，不能使用,设置多值
2、不能贴合border-radius属性，产生圆角
三、实现边框内圆角
方法：
background:tan;
border-radius:.8em;
padding:1em;
/*实现弯角*/
box-shadow:0 0 0 .6em #655;
outline:.6em solid #655;
注意：框宽度width必须满足边
border-radius*(1.414-1)<border-shadow<outline
四、实现连续的图像边框
方法：
padding: 1em;
border: 1em solid transparent;
background: linear-gradient(white,white),url(2.56.jpg);
background-size: cover;
background-clip: padding-box,border-box;
/*默认background-origin:padding-box*/
background-origin: border-box;
简写：
padding: 1em;
border: 1em solid transparent;
background: linear-gradient(white,white) padding-box,url(2.56.jpg) border-box 0/cover;
五、实现信封边框
方法一：
padding: 1em;
border: 1em solid transparent;
background: linear-gradient(white,white) padding-box,
repeating-linear-gradient(-45deg,red 0,red 12.5%,
transparent 0,transparent 25%,#58a 0,#58a 37.5%,
transparent 0,transparent 50%) 0/5em 5em;
方法二：
padding: 1em;
border: 16px solid transparent;
border-image:16 repeating-linear-gradient(-45deg,red 0,red 1em,
transparent 0,transparent 2em, #58a 0,#58a 3em,transparent 0,transparent 4em);
注意：
1、border-width=border-image-slice=16px，需要同时修改两处
2、border-image-slice不能使用em
六、实现蚂蚁行军边框
方法：
padding: 1em;
border: 1em solid transparent;
background: linear-gradient(white,white) padding-box,
repeating-linear-gradient(-45deg,red 0,red 12.5%,
transparent 0,transparent 25%,#58a 0,#58a 37.5%,
transparent 0,transparent 50%) 0/5em 5em;
animation: ants 12s linear infinite;
@keyframes ants { to {background-position: 100%}}
声明：以上方法参考《CSS揭秘》