【CSS】多重边框

代码地址

box-shadow方案

box-shadow支持逗号分隔法，可以创建任意数量的投影。

注意点：

• 投影不会影响布局。
• 外投影创造出来的假边框不会响应元素鼠标事件。如果需要响应事件，应转为内投影（inset），同时需要增加额外的内边距来腾出空隙。

<div class="container one" onclick="console.log('click')" >
  box-shadow
</div>
<div class="container two" onclick="console.log('click')" >
  box-shadow
</div>

 

.container {
  width:200px;
  height:150px;
  display:flex;
  justify-content:center;
  align-items:center;
}
.one {
  background:#eee;
  margin:100px auto;
  box-shadow:0 0 0 10px ,0 0 0 15px red;
}
.two {
  background:#eee;
  margin:100px auto;
  box-shadow:0 0 0 10px inset,0 0 0 15px red inset;
}

 

outline方案

得到的边框样式灵活。

注意点：

• 只适用于双层边框场景。
• outline不会贴合border-radius圆角。
• 根据w3规范“描边可以不是矩形的”。最好在不同浏览器中测试效果。

<div class="container outline1" onclick="console.log('click')" >
  outline
</div>
<div class="container outline2" onclick="console.log('click')" >
  outline
</div>
<div class="container outline3" onclick="console.log('click')" >
  outline
</div>

.outline1 {
  border:10px solid ;
  outline:5px solid red;
}
.outline2 {
  border:10px solid ;
  outline:5px dashed red;
  outline-offset:-5px;
}
.outline3 {
  border-radius:20px;
  border:10px solid ;
  outline:5px solid red;
}