英文:
CSS multi border like image
问题
请为我建议一个CSS样式，以制作如下边框，非常感谢。
英文:
Please suggest me a CSS to make border like below, many thanks
答案1
得分: 1
以下是翻译好的部分：
body {
padding: 30px;
}
.container {
position: relative;
padding: 20px;
}
.content-container {
text-align: center;
border: 1px solid black;
padding: 30px;
position: relative;
z-index: 2;
}
.box {
position: absolute;
z-index: 1;
}
.box-a {
border-top: 1px solid black;
border-bottom: 1px solid black;
top: 0;
left: 40px;
right: 40px;
bottom: 0;
}
.box-b {
border-left: 1px solid black;
border-right: 1px solid black;
top: 40px;
left: 0;
right: 0;
bottom: 40px;
}
.corner {
width: 40px;
height: 40px;
}
.corner-top-left {
top: 0;
left: 0;
border-right: 1px solid black;
border-bottom: 1px solid black;
}
.corner-top-right {
top: 0;
right: 0;
border-left: 1px solid black;
border-bottom: 1px solid black;
}
.corner-bottom-left {
bottom: 0;
left: 0;
border-right: 1px solid black;
border-top: 1px solid black;
}
.corner-bottom-right {
bottom: 0;
right: 0;
border-left: 1px solid black;
border-top: 1px solid black;
}
<div class="container">
<div class="box box-a"></div>
<div class="box box-b"></div>
<div class="box corner corner-top-left"></div>
<div class="box corner corner-top-right"></div>
<div class="box corner corner-bottom-left"></div>
<div class="box corner corner-bottom-right"></div>
<div class="content-container">
在这里插入所有您的内容
</div>
</div>
英文:
This is what I guess, not sure if it is the best way:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
body {
padding: 30px;
}
.container {
position: relative;
padding: 20px;
}
.content-container {
text-align: center;
border: 1px solid black;
padding: 30px;
position: relative;
z-index: 2;
}
.box {
position: absolute;
z-index: 1;
}
.box-a {
border-top: 1px solid black;
border-bottom: 1px solid black;
top: 0;
left: 40px;
right: 40px;
bottom: 0;
}
.box-b {
border-left: 1px solid black;
border-right: 1px solid black;
top: 40px;
left: 0;
right: 0;
bottom: 40px;
}
.corner {
width: 40px;
height: 40px;
}
.corner-top-left {
top: 0;
left: 0;
border-right: 1px solid black;
border-bottom: 1px solid black;
}
.corner-top-right {
top: 0;
right: 0;
border-left: 1px solid black;
border-bottom: 1px solid black;
}
.corner-bottom-left {
bottom: 0;
left: 0;
border-right: 1px solid black;
border-top: 1px solid black;
}
.corner-bottom-right {
bottom: 0;
right: 0;
border-left: 1px solid black;
border-top: 1px solid black;
}
<!-- language: lang-html -->
<div class="container">
<div class="box box-a"></div>
<div class="box box-b"></div>
<div class="box corner corner-top-left"></div>
<div class="box corner corner-top-right"></div>
<div class="box corner corner-bottom-left"></div>
<div class="box corner corner-bottom-right"></div>
<div class="content-container">
insert here all your content
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论