box-shadow 覆盖 content 的边框

2018-08-09  本文已影响13人  吖吓

在 CSS 中,在 DOM 元素上添加边框,Chrome 的机制是在 content 外层包围一层边框。本来也没什么问题, 但有一种场景希望边框能覆盖在内容上。

其中一种做法是添加四个<i> 标签,绝对定位到四条边上,但这样不仅增加了 DOM 标签,CSS 样式也增加不少,绝对定位又增加了布局负担,实在不是上选。

而第二种做法方便不少,就是用 box-shadow,内嵌阴影,既不用增加 DOM,又不用增加 CSS,完美!

box-shadow: inset 0 0 0 1px red;
上一篇 下一篇

猜你喜欢

热点阅读