如何啟用雙虛線邊框？

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>

什么都行不通 就像它甚至是其中一個。 我錯過了什么？ 謝謝

Answer 1

您可以使用一個div簡單地修復此問題，您可以使用輪廓和邊框，然后使用outline-offset屬性

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

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

Answer 2

border-style as dashed double沒有border-style as dashed double ，
但是border-style:double屬性給出了two border但是為solid線，所以你可以使用pseudo selector並聲明border-style：flashhed on both，如下所示，

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

Answer 3

您可以創建外部和內部div，並可以為它們提供邊框。

 div { border: 1px dashed black; } .outer { padding: 5px; } 

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