双边框之间的空间

2024-05-21 • 问答

我正在尝试使用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;
}

您可以使用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>

您可以考虑使用outline-offset

.box {
  margin:15px;
  width:200px;
  height:100px;
  border:1px solid red;
  outline:1px solid red;
  outline-offset:9px;
}

<div class="box"></div>

我不相信有内置的方法可以调整双边框本身的间距，但是，这是一种可以调整嵌套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>

双边框之间的空间

lhbfqlz 回答：双边框之间的空间

大家都在问