原始文档: 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;