在 CSS 中,在 DOM 元素上添加边框,Chrome 的机制是在 content 外层包围一层边框。本来也没什么问题, 但有一种场景希望边框能覆盖在内容上。
其中一种做法是添加四个<i>
标签,绝对定位到四条边上,但这样不仅增加了 DOM 标签,CSS 样式也增加不少,绝对定位又增加了布局负担,实在不是上选。
而第二种做法方便不少,就是用 box-shadow
,内嵌阴影,既不用增加 DOM,又不用增加 CSS,完美!
box-shadow: inset 0 0 0 1px red;