使用 CSS 截断或部分边框答案

【问题标题】：Truncated or partial borders with CSS使用 CSS 截断或部分边框
【发布时间】：2022-01-06 17:02:52
【问题描述】：

我正在尝试做如下图所示的事情。我想要一个有 3 个边框的 div，但是外面的 2 个边框会以图片中显示的方式被截断。我想知道是否可以使用纯CSS解决方案获得这种效果：

【问题讨论】：

有可能...你试过什么？我建议尝试使用::after ::before 查看这个问题here
我在这里使用了一些示例：stackoverflow.com/questions/14387690/…
希望您至少尝试自己编写代码。我建议你做一些additional research，无论是通过谷歌还是通过搜索，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。

【解决方案1】：

这是一个简单的解决方案：

.box {
  width:200px;
  height:150px;
  margin:80px;
  border:10px solid red;
  position:relative;
}
.box:before,
.box:after {
  content:"";
  position:absolute;
  inset:-30px;
  border:10px solid #0000;
  border-image:linear-gradient(-45deg,blue 20%,#0000 0 80%,blue 0) 10;
}

.box:after {
  inset:-50px;
  border-image:linear-gradient(-45deg,green 20%,#0000 0 80%,green 0) 10;
}

&lt;div class="box"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

不确定这是否是最简单的解决方案，但看起来我可以使用背景线性渐变来做到这一点。边框颜色有助于显示线性渐变的不同分量。此处示例：https://jsfiddle.net/pn6a8rqj/171/

*{
  --bw:15px;
}


.corners>div{
  position:absolute;
}

.corners>div:nth-child(1),.corners>div:nth-child(2) {
  position:absolute;
  background:
    /*top left*/
    linear-gradient(to right, red var(--bw), transparent 0px) 0 0,    
    linear-gradient(135deg, blue calc(.7071*var(--bw)), transparent 0px) 0 var(--ch),
    linear-gradient(to bottom, green var(--bw), transparent 0) 0 0,
    linear-gradient(135deg, orange calc(.7071*var(--bw)), transparent 0px) var(--cw) 0,

    /*bottom right*/
    linear-gradient(to left, red var(--bw), transparent 0) 100% 100%,
    linear-gradient(315deg, blue calc(.7071*var(--bw)), transparent 0px) 100% calc(100% - var(--ch)),
    linear-gradient(to top, green var(--bw), transparent 0) 100% 100%,
    linear-gradient(315deg, orange calc(.7071*var(--bw)), transparent 0px) calc(100% - var(--cw)) 100%;

  background-repeat: no-repeat;
  background-size: var(--cw) var(--ch);
}

.corners>div:nth-child(1){
  top:0;
  left:0;
  --ch:var(--corner1Height);
  --cw:var(--corner1Width);
  width: calc(var(--width) + 8*var(--bw));
  height: calc(var(--height) + 8*var(--bw));
}
.corners>div:nth-child(2){
  top:calc(2*var(--bw));
  left:calc(2*var(--bw));
  --ch:var(--corner2Height);
  --cw:var(--corner2Width);
  width: calc(var(--width) + 4*var(--bw));
  height: calc(var(--height) + 4*var(--bw));
}

.corners>div:nth-child(3){
  box-sizing:border-box;
  top:calc(4*var(--bw));
  left:calc(4*var(--bw));
  border: var(--bw) solid black;
  width: var(--width);
  height: var(--height);
}


#div1 {
  --corner1Height:50px;
  --corner1Width:100px;
  --corner2Height:100px;
  --corner2Width:200px;
  --width:500px;
  --height:300px;
  width: var(--width);
  height: var(--height);
}

【讨论】：