解决方法如下:
方法一:使用伪元素添加额外的边框样式 HTML:
CSS:
.box {
width: 200px;
height: 200px;
border: 1px solid black;
position: relative;
}
.box::after {
content: '';
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border: 1px solid red;
}
方法二:使用box-shadow属性模拟边框样式 HTML:
CSS:
.box {
width: 200px;
height: 200px;
box-shadow: 0 0 0 1px black;
padding: 10px;
background-color: white;
box-sizing: border-box;
position: relative;
}
.box::after {
content: '';
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
box-shadow: 0 0 0 1px red;
}
这两种方法都能在元素周围添加额外的边框样式。
上一篇:边框显示错误的问题