CSSのグラデーションを使用して破線の境界を作成しました

Question

最新のFirefox、Chrome、Safari、IE10 +のブラウザで同じように見える破線の境界線を追加する方法を探しています。普通の1px dashed #000は、すべてのブラウザで異なるため、私のためには機能しません。imageは拡大縮小されません。

私はCSSグラデーションでこれを行う方法を理解しようとしています。

ダッシュの長さを制御する可能性がある場合は涼しいでしょう。

Answer 1

あなたはそのため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>