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;
}