如何启用双虚线边框？

Question

当我输入这个：

   <style>
        .tavit{
            width:400px;
            height:300px;
            background-color:yellow;
            border:dashed; /*First I applied - border:dashed double (In order to get a double dashed border - but it didn't work for some reason*/
            border-style:double;
            margin:auto;
            font-size:medium;
            text-align:right;
        }
        .adom {
            color: red;
            font-size: xx-large;
            text-align: center;
        }
    </style>

什么都不起作用，似乎只能选其一。我错过了什么吗？ 谢谢。

- user7910922

---

你需要分享更多信息，你在哪里使用它？是否有其他的CSS覆盖了它？... - mxr7350

看这里，有人已经解决了这个问题。 https://css-tricks.com/forums/topic/double-dotted-border/#post-82796 - Ishwar Patil

“border-style” 属性不是这样工作的。 “double” 属性表示双实线，而 “dashed” 表示虚线。 您可以指定多个值，但会影响元素的不同边缘：https://www.w3schools.com/cssref/pr_border-style.asp - Armin

我认为那样做不太可行，“dashed”和“double”是不同的样式，你正在通过“border-style”覆盖“border”。 - Carl Binalla

首先，当您使用缩写符号（例如border）时，您在属性中可以放置的内容是有限制的。放入2种样式绝对行不通。无论如何，我认为没有简单的解决方案。您需要应用一些技巧，例如使用类似边框的替代属性，或将元素包装在另一个元素内，并对两者都应用边框。 - Manngo

@ivp 看到了这个，尝试了一下，但还是不行。似乎只有一个外部 div 是唯一的解决方案？ - user7910922

Answer 1

您可以使用一个div简单地解决这个问题，您可以使用outline和border属性，然后使用outline-offset属性。

.test {
  background:white;
  padding:15px;
  border:1px dashed #000;
  outline:1px dashed #000;
  outline-offset:-5px;
}

<div class="test">see this</div>

- Jishnu V S

Answer 2

没有 border-style为dashed double，
但是border-style:double属性会给出两条边框，但是这些边框是实线，所以你可以使用伪选择器并在两个边框上声明dashed，如下所示：

 .tavit {
   width: 400px;
   height: 300px;
   background-color: yellow;
   border: dashed;
   border-style: dashed;
   margin: auto;
   font-size: medium;
   text-align: right;
   position: relative;
 }
 
 .tavit:before {
   content: "";
   width: 94%;
   height: 280px;
   border-style: dashed;
   position: absolute;
   left: 2%;
   top: 8px;
 }

<div class="tavit">

</div>

- frnt

---

在响应式屏幕的情况下无法正常工作。 - Vipertecpro

是的。因为父级div宽度以px声明，并且在响应式屏幕上在400px后停止缩放。因此，如果您使用媒体查询并更改父级div宽度，它将解决这个问题。 - frnt

Answer 3

您可以创建外部和内部div，并为它们两个都设置边框。

div {
  border: 1px dashed black;
}

.outer {
  padding: 5px;
}

<div class="outer">
  <div class="inner">Long long long text</div>
</div>

- athi