如何在CSS中设置div的边框样式

debugcn 发表于 Dev

zlDeath

有人可以帮助我产生以下示例中的效果吗？我试图将不成功的响应部分...

我能得到的最接近的代码如下所示：

.content .card-l {
  margin-top: 1vh;
  position: relative;
  border-top: 2px solid #00ffde;
  border-bottom: 2px solid #c9ff04;
  border-left: 2px solid #5bff69;
  border-right: 2px solid #2a43c1;
}

.content .card-l::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-top: 3px solid #ba6c0e;
  border-bottom: 3px solid #d3cc0b;
  border-left: 3px solid #990be6;
  border-right: 3px solid #9a1b3b;
}

.content .card-l::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-top: 3px solid #070400;
  border-bottom: 3px solid #ff8f3a;
  border-left: 3px solid #1b9fbd;
  border-right: 3px solid #d87777;
}

.content .card-l .card-content {
  position: relative;
  background: #e0bf95;
  padding: 30px;
  border-top: 2px solid #82f577;
  border-bottom: 2px solid #1c1f31;
  border-left: 2px solid #d6d254;
  border-right: 2px solid #f380de;
}
.content .card-l .card-content::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-top: 3px solid #18fd03;
  border-bottom: 3px solid #34eca3;
  border-left: 3px solid #5528e9;
  border-right: 3px solid #df2cec;
}

.content .card-l .card-content::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border: 3px solid #806c53;
}

陪同Afif

您可以考虑多个背景，clip-path如下所示：

.box {
  --c1:#806c53; /* first color */
  --c2:#5d4e39; /* second color */
  --b:20px; /* border width */
  
  margin:10px;
  width:200px;
  height:100px;
  font-size:25px;
  outline:3px solid #321f1a; /* outer border */
  border:var(--b) solid transparent;
  padding:3px; /* control the inner border */
  background:
    linear-gradient(#e0bf94 0 0) content-box, /* main background */
    linear-gradient(#321f19 0 0) padding-box; /* inner border */
  position:relative;
}
/* main border */
.box:before,
.box:after {
  content:"";
  position:absolute;
  z-index:-1;
  top:calc(-1*var(--b));
  right:calc(-1*var(--b));
  bottom:calc(-1*var(--b));
  left:calc(-1*var(--b));
  background:
    linear-gradient(var(--s1,var(--c1)) 0 0) center/calc(100% - var(--b)) calc(100% - var(--b)) no-repeat,
    linear-gradient(var(--s2,var(--c2)) 0 0);
}
.box:after {
  --s1:var(--c2);
  --s2:var(--c1);
  clip-path:
    polygon(0 0,0 100%,var(--b) calc(100% - var(--b)),
              var(--b) var(--b),calc(100% - var(--b)) var(--b),100% 0);
}

<div class="box"> some text here </div>

<div class="box" style="--b:30px;--c1:red;--c2:darkred;width:300px;"> some text here </div>

<div class="box" style="--b:10px;--c1:blue;--c2:darkblue;width:300px;"> some text here </div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。