使用css漸變的虛線邊框

我在試圖找出如何添加在最新的Firefox，Chrome，Safari和IE10 +瀏覽器中看起來相同的虛線邊框。普通的1px dashed #000不適用於我，因爲它在所有瀏覽器中都不同，並且image不能縮放。使用css漸變的虛線邊框

我想弄清楚如何做到這一點的CSS漸變。

如果有控制短劃線長度的可能性，這將很酷。

來源

2016-11-08 Rantiev

的[控制筆劃之間的虛線邊框行程長度和距離]可能的複製（http://stackoverflow.com/questions/2771171/control-the-dashed-border-stroke-length-and-distance-between-stroke） – secelite

這可能也有助於理解如何生成短跑+漸變 - http://stackoverflow.com/questions/32500570/gradient- line-with-dashed-pattern/32501799＃32501799（不確定你的意思是創建了一個虛線邊界* us ing *漸變或帶*漸變的虛線邊框） – Harry

使用css漸變創建的虛線邊框，下次更精確，謝謝。 – Rantiev

可以使用border-image爲：

div { 
 
    width: 100px; 
 
    height: 50px; 
 
    border: 10px solid transparent; 
 
     -webkit-border-image: url('http://www.w3schools.com/cssref/border.png') 30; 
 
    -o-border-image: url('http://www.w3schools.com/cssref/border.png') 30; 
 
    border-image: url('http://www.w3schools.com/cssref/border.png') 30; 
 
    }

<div></div>

來源

2016-11-08 15:22:09 Justinas

ie10-11呢？它會在那裏工作嗎？這一點很重要。正如我寫的，我不想使用圖像，我曾經在過去削減單一的破折號的圖像，但doent喜歡那個解決方案。 – Rantiev

@Rantiev如果你依賴於瀏覽器的默認樣式，而不是接受樣式可能會改變，這取決於瀏覽器和操作系統 – Justinas

我想在我提供的瀏覽器列表中使用漸變完成相同的虛線邊框。 – Rantiev

使用css漸變的虛線邊框

回答

相關問題