css secrets----multiple borders

　　原始文档： https://www.zybuluo.com/freeethy/note/193574

　　

box-shadow solution

只能实现solid border

box-shadow表现为border，但是不属于box-sizing范围：

background: yellowgreen;
box-shadow: 0 0 0 10px #655;

多个box-shadow值可显示多个border的效果，多个box-shadow的值按层显示的，最前面的显示在最上层：

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

多个box-shadow值，有些表现为border效果，有些表现为shadow效果，并且border-radius的影响，此时的border-radius对每个box-shadow值都有效果：

box-shadow:0 0 0 10px #655,
0 0 0 15px deeppink,
0 2px 5px 15px rgba(0,0,0,.6);
border-radius:10px;

outline solution

可实现dashed border

可配合outline-offset实现border的偏移

只能实现两层border

此种方法的实现及border-radius的影响，border-radius对outline没效果：

border: 5px solid #655;
outline: 5px dashed deeppink;
outline-offset: 10px;
border-radius:10px;