如何啓用雙虛線邊框？

當我鍵入：如何啓用雙虛線邊框？

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

沒有什麼作品。就像它甚至是一個或另一個。我錯過了什麼？感謝

來源

2017-05-08 Muli Cohen

你需要共享多一點，其中你在用它嗎？有沒有覆蓋任何其他CSS？... – mxr7350

看這個。有些人已經解決了這個問題。 https://css-tricks.com/forums/topic/double-dotted-border/#post-82796 – ivp

'邊框style'屬性不起作用這種方式。 double屬性意味着雙滿線，虛線意味着虛線。您可以指定多個值，但會影響元素的不同側面： https://www.w3schools.com/cssref/pr_border-style.asp – Armin

您可以創建一個外部和內部的div並能兩者給邊界。

div { 
 
    border: 1px dashed black; 
 
} 
 

 
.outer { 
 
    padding: 5px; 
 
}

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

來源

2017-05-08 08:51:42 athi

你可以簡單地用一個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>

來源

2017-05-08 08:56:41

沒有border-style as dashed double ，
但border-style:double財產給two border但solid線，所以你可以使用pseudo selector並宣佈邊框樣式：虛線在兩個如下，

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

來源

2017-05-08 09:00:56 frnt

如何啓用雙虛線邊框？

回答

相關問題