我正在为一个使用nextjs的客户处理一个项目，该设计要求我在响应的css网格上有一个带有自定义边框的组件.我已经制作了包含所有内容的css网格，但是添加设计所需的边框时遇到了很多麻烦.
到目前为止，我已经try 了将边框作为背景的一部分，但当我在设备之间移动时，这会变得很奇怪，我也try 过使用aftter伪元素，但我没有取得任何进展.
我需要在css网格的边框看起来像下面的图片:
有没有人能帮我一下？非常感谢您的帮助.
我正在为一个使用nextjs的客户处理一个项目，该设计要求我在响应的css网格上有一个带有自定义边框的组件.我已经制作了包含所有内容的css网格，但是添加设计所需的边框时遇到了很多麻烦.
到目前为止，我已经try 了将边框作为背景的一部分，但当我在设备之间移动时，这会变得很奇怪，我也try 过使用aftter伪元素，但我没有取得任何进展.
我需要在css网格的边框看起来像下面的图片:
有没有人能帮我一下？非常感谢您的帮助.
使用border-image property可以更快地实现这一点.坐square image shape路车，把它放在div的边框里.上面所附的链接有一个相关的例子.请看一看.
OR个
你可以试试这个不需要图像的:-
.container{
display: flex;
}
.container > .box{
padding: 2rem 1rem;
border: 1px solid black;
position: relative;
}
.container > .box:nth-child(odd):before,
.container > .box:after
{
content: '';
display: block;
width: 10px;
height: 10px;
border: 1px solid black;
background-color: pink;
position: absolute;
z-index: 1;
}
.container > .box:before{
top: -5px;
left: -5px;
}
.container > .box:after{
top: -5px;
right: -5px;
}
.container > .box:nth-child(odd) > span:before,
.container > .box > span:after
{
content: '';
display: block;
width: 10px;
height: 10px;
border: 1px solid black;
background-color: pink;
position: absolute;
z-index: 1;
}
.container > .box > span:before{
bottom: -5px;
left: -5px;
}
.container > .box > span:after{
bottom: -5px;
right: -5px;
}<div class="container">
<div class="box">
<span>Lorem Ipsum</span>
</div>
<div class="box">
<span>Ipsum Lorem</span>
</div>
</div>