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

Question

谁能帮我做一个像下面例子中那样的效果？我正在尝试将不成功放在响应部分...

我能得到的最接近的是下面的代码和图片：

.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;
}

Answer 1

您始终可以放置多个 div 以包含不同的边框。

或

在css中使用边框图像。如果您能找到图像，这将是一种更简单的方法。更多参考 here.

Answer 2

您可以考虑多个背景和 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>

Answer 3

在这里你可以找到一个例子

.content {
  border: 2px solid #321f19;
}

.card-l {
  border-top: 4px solid #5d4e39;
  border-right: 4px solid #806c53;
  border-bottom: 4px solid #806c53;
  border-left: 4px solid #5d4e39;
}

.card-content {
  border-top: 4px solid #806c53;
  border-right: 4px solid #5d4e39;
  border-bottom: 4px solid #5d4e39;
  border-left: 4px solid #806c53;
  position: relative;
  background-color: #e0bf94;
}

.card-content::before {
  content: "";
  width: calc(100% - 4px); /*remove one border size from the 100%*/
  height: calc(100% - 4px); /*remove one border size from the 100%*/
  position: absolute;
  border: 2px solid #321f19;
}

span {
  display: block;
  padding: 30px;
  text-align: center;
  z-index: 1;
}

.btn {
  margin: 10px auto;
  display: block;
  position: relative;
  padding: 10px;
}

<div class="content">
  <div class="card-l">
    <div class="card-content">
      <button id="button" class="btn">hello!!!</button>
    </div>
  </div>
</div>

Answer 4

这是一个仅使用一个 div 的示例，没有额外的容器或跨度，利用了 box shadow and the :after pseudo element.

.card-1 {
  position: relative;
  padding: 4rem;
  background: #e0bf94;
  box-shadow: 0 0 0 2px #321f19; /* outer border */
  border: 4px solid;
  border-color: #5d4e39 #5d4e39 #806c53 #806c53; /* second border */
  z-index: 1;
}
.card-1:after {
  content: '';
  position: absolute;
  left: 0;
  right:0;
  top: 0;
  bottom: 0;
  border: 4px solid;
  border-color: #806c53 #806c53 #5d4e39 #5d4e39; /* third border */
  box-shadow: inset 0 0 0 2px #321f19; /* inner and last border */
  z-index: -1;
}

<div class="card-1"><a href="#">Lorem ipsum</a></div>

你也可以只用 box-shadow.

就可以达到非常相似的效果

.card-1 {
  position: relative;
  padding: 4rem;
  background: #e0bf94;
  border: 4px solid;
  border-color: #5d4e39 #5d4e39 #806c53 #806c53;
  box-shadow: 0 0 0 2px #321f19,
    inset -4px 4px 0 0 #806c53,
    inset 4px -4px 0 0 #5d4e39,
    inset 0 0 0 6px #321f19;
}

<div class="card-1">Lorem ipsum</div>

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

How to style borders of a div in css

html

css

border

sass