0

我正在尝试使用添加双边框，border: 10px double red;但如何控制边框的厚度和间距？我希望边框的厚度为 1px。如果我只是将边框更改为 1px，则边框会重叠并且几乎只有一个边框可见。我也尝试使用边框宽度 1px 但结果相同。

我也一直在尝试使用边框间距属性，但无法使其正常工作。

这是我想要完成的截图：https ://share.getcloudapp.com/JrugmEG2

工作jsfiddle：https ://jsfiddle.net/7Lw21z85/

HTML：

<div class="container">
   <span class="box">
      <h1 class="heading">
         Heading text
      </h1>
      <p>
         some text :)
      </p>
   </span>
</div>

CSS：

.container {
text-align: center;
display: flex;
align-items: center;
flex-direction: column;
padding: 8%;
background-color: black;
}

.heading {
  margin: 0;
  padding: 0;
  color: black;
}

p {
  margin: 0;
  padding: 0;
color: black;
}

.box {
  background-color: white;
  border: 10px double red;
  padding: 8%;
  outline: 15px solid #ffffff;
}
4

3 回答 3

2

您可以box-shadow用来制作元素周围的两个边框的错觉

.container {
text-align: center;
display: flex;
align-items: center;
flex-direction: column;
padding: 8%;
background-color: black;
}

.heading {
  margin: 0;
  padding: 0;
  color: black;
}

p {
  margin: 0;
  padding: 0;
color: black;
}

.box {
  background-color: white;
  padding: 8%;
  box-shadow: 0 0 0 1px #B38D6A, 0 0 0 5px #fff, 0 0 0 6px #B38D6A, 0 0 0 11px #fff;
}
<div class="container">
   <span class="box">
      <h1 class="heading">
         Heading text
      </h1>
      <p>
         some text :)
      </p>
   </span>
</div>

于 2020-10-29T22:17:42.753 回答
2

你可以考虑outline-offset

.box {
  margin:15px;
  width:200px;
  height:100px;
  border:1px solid red;
  outline:1px solid red;
  outline-offset:9px;
}
<div class="box"></div>

于 2020-10-29T22:24:03.013 回答
0

我不相信有一种内置的方法可以调整双边框本身的间距，但是，这是一种可以调整嵌套 div 中每个实心边框的粗细的方法。

.container {
text-align: center;
display: flex;
align-items: center;
flex-direction: column;
padding: 8%;
background-color: black;
}

.heading {
  margin: 0;
  padding: 0;
  color: black;
}

p {
  margin: 0;
  padding: 0;
color: black;
}

.outer-box {
  background-color: white;
  border: 1px solid red;
  padding: 2%;
  outline: 5px solid #ffffff;
}

.middle-box {
  background-color: white;
  border: 1px solid red;
  padding: 4%;
  outline: 5px solid #ffffff;
}

.box {
  background-color: white;
  border: 1px solid red;
  padding: 4%;
  outline: 5px solid #ffffff;
}
<div class="container">
<div class="outer-box">
<div class="middle-box">
   <div class="box">
      <h1 class="heading">
         Heading text
      </h1>
      <p>
         some text :)
      </p>
   </div>
   </div>
   </div>
</div>

于 2020-10-29T22:26:51.680 回答