在 CSS 中,可以通过使用 border 属性来给元素添加边框。但是如果你需要添加的是两个边框呢?比如上下分别为红色和蓝色,左右是绿色和黄色,而且要让这两个边框合为一个。实现这个效果的方法是使用 o
在 CSS 中,可以通过使用 border
属性来给元素添加边框。但是如果你需要添加的是两个边框呢?比如上下分别为红色和蓝色,左右是绿色和黄色,而且要让这两个边框合为一个。
实现这个效果的方法是使用 outline
属性。这个属性同样可以给元素添加边框,但是不会改变元素的实际大小和位置,并且可以叠加多个边框。
.box { position: relative; width: 200px; height: 100px; background-color: #eee; outline: 10px solid red; } .box:before { content: '; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; border: 10px solid blue; z-index: -1; }
上面的代码中,我们首先给元素添加了一个 10px 的红色边框。然后使用伪元素 :before
来添加一个 10px 的蓝色边框,并把它设为元素的底层图层,这样两个边框就可以平滑地叠加在一起了。
需要注意的是,这种方法只适用于元素的宽度和高度已经确定的情况下。另外,如果需要添加更多的边框,可以使用类似的方式在伪元素中添加。
粉丝
0
关注
0
收藏
0