我创建了一个稍微旋转的中心部分边框。另外，我给了该部分的每一面不同的颜色。这是我的基本代码：
body{
background-color: #594451;
color: #fff;
}
.boxed{
position: absolute;
margin:auto;
/* border: 3pc solid rgba(255, 255, 255 ,1); */
border-left: solid rgba(127, 203, 170, 1) 3pc;
border-right: solid rgba(186, 179, 173, 1) 3pc;
border-bottom: solid rgba(0, 171, 238, 1) 3pc;
border-top: solid rgba(229, 99, 57, 1) 3pc;
height: 20pc;
width: 20pc;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}<h1>Welcome to Rahul's Lab</h1>
<section class="boxed">
<!-- <p>This will contain the box properly</p> -->
</section>
我可以实现相互重叠的边框吗？是否可以通过使用CSS或我是否必须为此创建单独的部分/ div？ HTML & CSS Design and build websites
参考：封面HTML＆amp; CSS设计和构建Jon Duckett的网站。
答案 0 :(得分：5)
边界重叠是不可能的......
...但是，这是一个使用CSS创建效果的解决方案：
linear-gradient来创建background background-blend-mode混合角落里的颜色⋅ ⋅ ⋅
更新了代码段
使用背景速记语法，就像Temani在这里https://stackoverflow.com/a/50526694/5061000
.boxed {
position: absolute;
margin: 5pc auto; /* Modified to better fit in tiny snippet */
--border-pc: 10%; /* You could even use a CSS variable to store the width if you want to be able to modify it easily. Or the colors. Or both. */
background:
/* Shorthand syntax used below: image position/sizeX sizeY */
linear-gradient(rgba(229, 099, 057, 1), rgba(229, 099, 057, 1)) top /100% var(--border-pc), /* Orange with CSS var */
linear-gradient(rgba(000, 171, 238, 1), rgba(000, 171, 238, 1)) bottom/100% var(--border-pc), /* Blue */
linear-gradient(rgba(127, 203, 170, 1), rgba(127, 203, 170, 1)) left /var(--border-pc) 100%, /* Green */
linear-gradient(rgba(186, 179, 173, 1), rgba(186, 179, 173, 1)) right /var(--border-pc) 100%; /* Gray */
background-blend-mode: multiply;
background-repeat: no-repeat;
height: 20pc;
width: 20pc;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: rotate(45deg);
}<section class="boxed">
<!-- <p>This will contain the box properly</p> -->
</section>
⋅ ⋅ ⋅
旧样式代码段
是的，它正在运作，但我更喜欢第一个！
.boxed {
position: absolute;
margin: 5pc auto; /* Modified to better fit in tiny snippet */
--border-pc: 10%; /* You could even use a CSS variable to store the width if you want to be able to modify it easily. Or the colors. Or both. */
/* I tried to indent it to better see the code: */
background-image:
linear-gradient(to top, /* Blue */
rgba(0, 171, 238, 1) 0%,
rgba(0, 171, 238, 1) var(--border-pc), /* example use of the CSS var */
transparent var(--border-pc) ),
linear-gradient(to right, /* Green */
rgba(127, 203, 170, 1) 0%,
rgba(127, 203, 170, 1) 10%,
transparent 10% ),
linear-gradient(to bottom, /* Orange */
rgba(229, 99, 57, 1) 0%,
rgba(229, 99, 57, 1) 10%,
transparent 10% ),
linear-gradient(to left, /* Gray */
rgba(186, 179, 173, 1) 0%,
rgba(186, 179, 173, 1) 10%,
transparent 10% );
background-blend-mode: multiply; /* Added to mix the colors */
height: 20pc;
width: 20pc;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: rotate(45deg);
}<section class="boxed">
<!-- <p>This will contain the box properly</p> -->
</section>
（请注意，如果您不使用background-blend-mode，您可以通过播放订单来选择哪些渐变与其他渐变重叠！）
希望它有所帮助。
答案 1 :(得分：3)
实际上不可能重叠边界，因为它们总是在div中以某个角度相交。但是，仍然可以通过制作单独的块来创建效果。属性mix-blend-mode允许您的图像提供叠加效果。
请注意mix-blend-mode对IE/Edge没有任何支持。
以下是如何做到的：
body {
margin: 30px
}
.block1 {
background: rgba(127, 203, 170, 1);
}
.block2 {
background: rgba(0, 171, 238, 1);
transform: rotate(90deg);
transform-origin: 20px 0;
mix-blend-mode: color-burn;
}
.block3 {
background: rgba(186, 179, 173, 1);
transform: translateY(140px);
mix-blend-mode: color-burn;
}
.block4 {
background: rgba(229, 99, 57, 1);
transform: translateY(30px) translateX(90px) rotate(90deg);
mix-blend-mode: darken;
}
.block {
height: 20px;
width: 200px;
}<div class="block1 block"></div>
<div class="block2 block"></div>
<div class="block3 block"></div>
<div class="block4 block"></div>
答案 2 :(得分：2)
这是另一种渐变解决方案，无需mix-blend-mode。我们的想法是使用渐变来制作每个角落，这样您就可以轻松控制颜色并模拟重叠：
.box {
margin:50px;
height:200px;
width:200px;
box-sizing:border-box;
background:
/*The 4 corners*/
linear-gradient(#905c3f,#905c3f) top left/20px 20px,
linear-gradient(#b04d32,#b04d32) top right/20px 20px,
linear-gradient(#02a9ae,#02a9ae) bottom left/20px 20px,
linear-gradient(#0085aa,#0085aa) bottom right/20px 20px,
/*The 4 borders*/
linear-gradient(#e6663a,#e6663a) top/100% 20px,
linear-gradient(#01adf0,#01adf0) bottom/100% 20px,
linear-gradient(#7fcaac,#7fcaac) left/20px 100%,
linear-gradient(#bab1ae,#bab1ae) right/20px 100%;
background-repeat:no-repeat;
transform:rotate(45deg);
}<div class="box">
</div>
答案 3 :(得分：0)
我发现如何做到这一点的唯一方法是，可能有更好的选择：
body{
background-color: #594451;
color: #fff;
}
.boxed1, .boxed2, .boxed3, .boxed4 {
position: absolute;
margin:auto;
/* border: 3pc solid rgba(255, 255, 255 ,1); */
box-sizing: border-box;
height: 20pc;
width: 20pc;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.boxed1 {
border-top: solid rgba(229, 99, 57, 1) 3pc;
}
.boxed2 {
border-right: solid rgba(186, 179, 173, 1) 3pc;
}
.boxed3 {
border-bottom: solid rgba(0, 171, 238, 1) 3pc;
}
.boxed4 {
border-left: solid rgba(127, 203, 170, 1) 3pc;
}<h1>Welcome to Rahul's Lab</h1>
<section class="boxed1">
<!-- <p>This will contain the box properly</p> -->
</section>
<section class="boxed2">
<!-- <p>This will contain the box properly</p> -->
</section>
<section class="boxed3">
<!-- <p>This will contain the box properly</p> -->
</section>
<section class="boxed4">
<!-- <p>This will contain the box properly</p> -->
</section>
希望这有帮助。