CSSで破線の境界線の長さと距離を制御することは可能ですか?
以下のこの例は、ブラウザ間で異なって表示されます。
div {
border: dashed 4px #000;
padding: 20px;
display: inline-block;
}
<div>I have a dashed border!</div>
大きな違い:IE 11/Firefox/Chrome
破線の境界線の外観をより詳細に制御できる方法はありますか?
Cssレンダリングはブラウザ固有であり、微調整はわかりません。Hamの推奨に従って画像を操作する必要があります。リファレンス: http://www.w3.org/TR/CSS2/box.html#border-style-properties
ネイティブの破線の境界線プロパティ値では、ダッシュ自体を制御できません... border-image
プロパティを使用してください!
border-image
で独自の境界線を作成しました互換性: 優れたブラウザーサポート (IE 11およびすべての最新ブラウザー)を提供します。通常の境界線は、古いブラウザーのフォールバックとして設定できます。
これらの境界線には、まったく同じクロスブラウザーが表示されます!
この例は幅15ピクセル、高さ15ピクセルで、ギャップは現在5ピクセル幅です。これは、透過性のある.pngです。
これは、ズームインするとphotoshopでどのように見えるかです:
これは、スケーリングすると次のようになります。
より広い/短いギャップまたはストロークを作成するには、画像のギャップまたはストロークを拡大/短縮します。
以下は、10pxのギャップの広い画像です。
正しくスケーリング=
border-image-source を定義します:
border-image-source:url("http://i.stack.imgur.com/wLdVc.png");
オプション- border-image-width を定義します:
border-image-width: 1;
デフォルト値は1です。ピクセル値、パーセンテージ値、または別の倍数(1x、2x、3xなど)で設定することもできます。これは、border-width
セットをオーバーライドします。
border-image-slice を定義します:
この例では、画像の上下左右の境界線の太さは2pxであり、それらの外側にギャップがないため、スライス値は2です。
border-image-slice: 2;
スライスは、上、右、下、左から2ピクセルのようになります。
border-image-repeat を定義します:
この例では、パターンが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
プロパティに加えて、ストロークの長さとそれらの間の距離を制御する破線の境界線を作成するいくつかの他の方法があります。以下に説明します。
path
またはpolygon
要素を使用して stroke-dasharray
プロパティを設定することにより、破線の境界線を作成できます。このプロパティは2つのパラメーターを取り、1つはダッシュのサイズを定義し、もう1つはそれらの間のスペースを決定します。
長所:
border-radius
が関係していても非常にうまく機能します。 この回答 のようなpath
をcircle
に置き換えるだけです(または)path
を円に変換します。短所:
vector-effect='non-scaling-stroke'
を追加することで制御できます(2番目のボックスのように)が、このプロパティのブラウザーサポートはIEではゼロです。.dashed-vector {
position: relative;
height: 100px;
width: 300px;
}
svg {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
}
path{
fill: none;
stroke: blue;
stroke-width: 5;
stroke-dasharray: 10, 10;
}
span {
position: absolute;
top: 0px;
left: 0px;
padding: 10px;
}
/* just for demo */
div{
margin-bottom: 10px;
transition: all 1s;
}
div:hover{
height: 100px;
width: 400px;
}
<div class='dashed-vector'>
<svg viewBox='0 0 300 100' preserveAspectRatio='none'>
<path d='M0,0 300,0 300,100 0,100z' />
</svg>
<span>Some content</span>
</div>
<div class='dashed-vector'>
<svg viewBox='0 0 300 100' preserveAspectRatio='none'>
<path d='M0,0 300,0 300,100 0,100z' vector-effect='non-scaling-stroke'/>
</svg>
<span>Some content</span>
</div>
複数のlinear-gradient
背景画像を使用して適切に配置し、破線の境界線効果を作成できます。これはrepeating-linear-gradient
でも実行できますが、各グラデーションを一方向にのみ繰り返す必要があるため、繰り返しグラデーションを使用するため、あまり改善されていません。
.dashed-gradient{
height: 100px;
width: 200px;
padding: 10px;
background-image: linear-gradient(to right, blue 50%, transparent 50%), linear-gradient(to right, blue 50%, transparent 50%), linear-gradient(to bottom, blue 50%, transparent 50%), linear-gradient(to bottom, blue 50%, transparent 50%);
background-position: left top, left bottom, left top, right top;
background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
background-size: 20px 3px, 20px 3px, 3px 20px, 3px 20px;
}
.dashed-repeating-gradient {
height: 100px;
width: 200px;
padding: 10px;
background-image: repeating-linear-gradient(to right, blue 0%, blue 50%, transparent 50%, transparent 100%), repeating-linear-gradient(to right, blue 0%, blue 50%, transparent 50%, transparent 100%), repeating-linear-gradient(to bottom, blue 0%, blue 50%, transparent 50%, transparent 100%), repeating-linear-gradient(to bottom, blue 0%, blue 50%, transparent 50%, transparent 100%);
background-position: left top, left bottom, left top, right top;
background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
background-size: 20px 3px, 20px 3px, 3px 20px, 3px 20px;
}
/* just for demo */
div {
margin: 10px;
transition: all 1s;
}
div:hover {
height: 150px;
width: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='dashed-gradient'>Some content</div>
<div class='dashed-repeating-gradient'>Some content</div>
長所:
短所:
border-radius
に基づいて湾曲しないため、border-radius
が含まれる場合は使用できません。代わりにクリップされます。疑似要素を使用して(ダッシュの形の)小さなバーを作成し、その複数のbox-shadow
バージョンを作成して、以下のスニペットのように境界線を作成できます。
ダッシュが正方形の場合、単一の疑似要素で十分ですが、長方形の場合は、上+下の境界に1つの疑似要素が必要で、左+右の境界に別の疑似要素が必要です。これは、上部の境界線のダッシュの高さと幅が左側のものと異なるためです。
長所:
短所:
border-radius
とともに使用できますが、円上のポイント(および場合によってはtransform
)を見つける必要があるため、それらの配置は非常に難しいでしょう。.dashed-box-shadow{
position: relative;
height: 120px;
width: 120px;
padding: 10px;
}
.dashed-box-shadow:before{ /* for border top and bottom */
position: absolute;
content: '';
top: 0px;
left: 0px;
height: 3px; /* height of the border top and bottom */
width: 10px; /* width of the border top and bottom */
background: blue; /* border color */
box-shadow: 20px 0px 0px blue, 40px 0px 0px blue, 60px 0px 0px blue, 80px 0px 0px blue, 100px 0px 0px blue, /* top border */
0px 110px 0px blue, 20px 110px 0px blue, 40px 110px 0px blue, 60px 110px 0px blue, 80px 110px 0px blue, 100px 110px 0px blue; /* bottom border */
}
.dashed-box-shadow:after{ /* for border left and right */
position: absolute;
content: '';
top: 0px;
left: 0px;
height: 10px; /* height of the border left and right */
width: 3px; /* width of the border left and right */
background: blue; /* border color */
box-shadow: 0px 20px 0px blue, 0px 40px 0px blue, 0px 60px 0px blue, 0px 80px 0px blue, 0px 100px 0px blue, /* left border */
110px 0px 0px blue, 110px 20px 0px blue, 110px 40px 0px blue, 110px 60px 0px blue, 110px 80px 0px blue, 110px 100px 0px blue; /* right border */
}
<div class='dashed-box-shadow'>Some content</div>
短いもの:いいえ、そうではありません。代わりに画像を使用する必要があります。