破線のボーダーストロークの長さとストローク間の距離を制御する
回答:
Cssレンダーはブラウザ固有であり、微調整がわからないので、Hamが推奨する画像を使用する必要があります。リファレンス：http : //www.w3.org/TR/CSS2/box.html#border-style-properties
ネイティブの破線のボーダープロパティ値は、ダッシュ自体の制御を提供しません...したがって、border-imageプロパティを呼び出します！
自分のボーダーを醸造する border-image
互換性：優れたブラウザーサポートを提供します（IE 11およびすべての最新ブラウザー）。通常の境界線は、古いブラウザのフォールバックとして設定できます。
これらを作成しましょう
これらの境界線はまったく同じクロスブラウザを表示します！
ステップ1-適切な画像を作成する
この例は幅15ピクセル、高さ15ピクセルで、ギャップは現在5px幅です。透明な.pngです。
これは、拡大したときのphotoshopの外観です。
これは、スケーリングすると次のようになります。
ギャップとストローク長の制御
ギャップまたはストロークを広く/短くするには、画像のギャップまたはストロークを広く/短くします。
以下は、10px間隔の広い画像です。
正しくスケーリング= 
ステップ2-CSSを作成します—この例には4つの基本的なステップが必要です
-
border-image-source:url("http://i.stack.imgur.com/wLdVc.png"); オプション -border -image-widthを定義します。
border-image-width: 1;デフォルト値は1です。これは、ピクセル値、パーセンテージ値、または別の倍数（1x、2x、3xなど）として設定することもできます。これはすべての
border-widthセットをオーバーライドします。-
この例では、画像の上、右、下、左のボーダーの厚さは2pxであり、それらの外側にギャップはないため、スライスの値は2です。
border-image-slice: 2;スライスは次のようになり、上、右、下、左から2ピクセルになります。
-
この例では、divの周囲でパターンが均等に繰り返されるようにします。だから私たちは選択します：
border-image-repeat: round;
略記
上記のプロパティは個別に、またはborder-imageを使用して簡単に設定できます。
border-image: url("http://i.stack.imgur.com/wLdVc.png") 2 round;完全な例
border: dashed 4px #000フォールバックに注意してください。サポートされていないブラウザはこの境界線を受け取ります。
.bordered {
display: inline-block;
padding: 20px;
/* Fallback dashed border
- the 4px width here is overwritten with the border-image-width (if set)
- the border-image-width can be omitted below if it is the same as the 4px here
*/
border: dashed 4px #000;
/* Individual border image properties */
border-image-source: url("http://i.stack.imgur.com/wLdVc.png");
border-image-slice: 2;
border-image-repeat: round;
/* or use the shorthand border-image */
border-image: url("http://i.stack.imgur.com/wLdVc.png") 2 round;
}
/*The border image of this one creates wider gaps*/
.largeGaps {
border-image-source: url("http://i.stack.imgur.com/LKclP.png");
margin: 0 20px;
}<div class="bordered">This is bordered!</div>
<div class="bordered largeGaps">This is bordered and has larger gaps!</div>border-imageプロパティに加えて、ストロークの長さとそれらの間の距離を制御して破線の境界線を作成する方法は他にもいくつかあります。それらについて以下に説明します。
方法1：SVGを使用する
pathまたはpolygon要素を使用してstroke-dasharrayプロパティを設定することにより、破線の境界線を作成できます。プロパティは2つのパラメーターを受け取り、1つはダッシュのサイズを定義し、もう1つはそれらの間隔を決定します。
長所：
- SVGは本来、スケーラブルなグラフィックであり、あらゆるコンテナーの寸法に適応できます。
- があっても非常にうまく機能することができます
border-radius関与し。この答えでは、pathをのcircleようなものに置き換えるだけです（または）を円に変換します。path - SVGのブラウザーサポートはかなり良好で、IE8用のVMLを使用してフォールバックを提供できます。
短所：
- コンテナーの寸法が比例して変化しない場合、パスは拡大縮小する傾向があり、ダッシュとその間のスペースのサイズが変化します（スニペットの最初のボックスにカーソルを合わせてみてください）。これは
vector-effect='non-scaling-stroke'（2番目のボックスのように）追加することで制御できますが、このプロパティのブラウザーサポートはIEではnilです。
方法2：グラデーションを使用する
複数のlinear-gradient背景画像を使用して適切に配置し、破線のボーダー効果を作成できます。これはaでも行うことができますが、repeating-linear-gradient各グラデーションを1方向のみで繰り返す必要があるため、繰り返しグラデーションを使用するため、それほど改善はありません。
長所：
- スケーラブルで、コンテナのサイズが動的であっても適応できます。
- 余分な疑似要素を使用しないため、他の潜在的な使用のためにそれらを保持できます。
短所：
- 線形グラデーションのブラウザーサポートは比較的低く、IE 9-をサポートする場合、これは大丈夫です。CSS3 PIEのようなライブラリでさえ、IE8-でのグラデーションパターンの作成をサポートしていません。
border-radiusはに基づいて背景が湾曲しないため、が含まれている場合は使用できませんborder-radius。代わりにクリップされます。
方法3：ボックスシャドウ
擬似要素を使用して（ダッシュの形の）小さなバーを作成し、複数の box-shadowバージョンを作成して、以下のスニペットのように境界線を作成できます。
ダッシュが正方形の場合は単一の疑似要素で十分ですが、長方形の場合は、上+下のボーダー用に1つの疑似要素と、左+右のボーダー用に1つの疑似要素が必要です。これは、上のボーダーのダッシュの高さと幅が左側のものとは異なるためです。
長所：
- ダッシュの寸法は、疑似要素の寸法を変更することで制御できます。間隔は、各シャドウ間のスペースを変更することで制御できます。
- 各ボックスのシャドウに異なる色を追加することにより、非常にユニークな効果を生み出すことができます。
短所：
- ダッシュと間隔の寸法を手動で設定する必要があるため、親ボックスの寸法が動的である場合、この方法は適切ではありません。
- IE8以前は、ボックスシャドウをサポートしていません。ただし、これはCSS3 PIEのようなライブラリを使用することで克服できます。
- で使用できますが
border-radius、それらを配置することは、円上の点（および場合によってはtransform）を見つける必要があるため、非常にトリッキーです。
pointer-events:none、コンテンツと対話できるようにsvgに追加することをお勧めします。
短いもの：いいえ、そうではありません。代わりに画像を使用する必要があります。
@kovartが作成した、破線のボーダージェネレーターというクールなツールがあります。
svgを背景画像として使用して、希望のストロークダッシュ配列を設定でき、非常に便利です。
次に、それを境界線の代わりに要素の背景プロパティとして使用します。
div {
background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='black' stroke-width='4' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
padding: 20px;
display: inline-block;
}ストロークの長さはストローク幅に依存します。幅を増やすことで長さを増やし、内側の要素で境界線の一部を隠すことができます。
.thin {
background: #F4FFF3;
border: 2px dashed #3FA535;
position: relative;
}
.thin:after {
content: '';
position: absolute;
left: -1px;
top: -1px;
right: -1px;
bottom: -1px;
border: 1px solid #F4FFF3;
}pointer-events: noneオーバーレイの問題を防ぐために追加できます。
最近、同じ問題が発生しました。
私は境界線を保持する2つの絶対位置のdiv（1つは水平、もう1つは垂直）でそれを解決し、それらを変換しました。外箱は相対的に配置する必要があるだけです。
<div class="relative">
<div class="absolute absolute--fill overflow-hidden">
<div class="absolute absolute--fill b--dashed b--red"
style="
border-width: 4px 0px 4px 0px;
transform: scaleX(2);
"></div>
<div class="absolute absolute--fill b--dashed b--red"
style="
border-width: 0px 4px 0px 4px;
transform: scaleY(2);
"></div>
</div>
<div> {{Box content goes here}} </div>
</div>注：この例ではタキオンを使用しましたが、クラスは一目瞭然だと思います。
border-style: solidフォールバックを省略する場合は、指定する必要があります（または同様のもの）。