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-stroke-between-stroke） – secelite

これは、ダッシュ+グラデーションがどのように生成されるかを理解するのに役立ちます - http://stackoverflow.com/questions/32500570/gradient-破線のパターン/ 32501799＃32501799（破線の枠線が作成されたかどうかわからない* us ing * gradientまたは破線のborder * with * gradient） – 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はどうですか？それはそこで働くだろうか？それは重要です。私が書いたように、私はイメージを使用したくない、私は過去に単一ダッシュのイメージをカットするのに使用されていたが、その解決策のようなものだった。 – Rantiev

@Rantievブラウザのデフォルトスタイルに頼っていると、ブラウザやOSによってスタイルが変わる場合があります。 – Justinas

私が用意したブラウザリストでグラデーションを使って同じ破線の枠線を作っています。 – Rantiev

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

答えて

関連する問題