html让相邻边框重叠,HTML – 我可以让两个相邻的边框相互交叉吗？

您可以使用线性渐变,只需要一个元素：

.box {

margin:30px;

width:100px;

height:100px;

padding:10px;

background:

linear-gradient(#fff,#fff) 10px 0,

linear-gradient(#fff,#fff) 0 10px,

linear-gradient(#fff,#fff) calc(100% - 10px) 0,

linear-gradient(#fff,#fff) 0 calc(100% - 10px);

background-size:1px 100%,100% 1px;

background-repeat:no-repeat;

}

body {

background:green;

}

您还可以依靠CSS变量轻松控制交集：

.box {

margin:20px;

width:100px;

height:100px;

padding:var(--c,10px);

background:

linear-gradient(#fff,#fff) var(--c,10px) 0,

linear-gradient(#fff,#fff) 0 var(--c,10px),

linear-gradient(#fff,#fff) calc(100% - var(--c,10px)) 0,

linear-gradient(#fff,#fff) 0 calc(100% - var(--c,10px));

background-size:1px 100%,100% 1px;

background-repeat:no-repeat;

display:inline-block;

box-sizing:border-box;

}

body {

background:green;

}