web-dev-qa-db-ja.com

破線の境界線の長さとストローク間の距離を制御する

CSSで破線の境界線の長さと距離を制御することは可能ですか？

以下のこの例は、ブラウザ間で異なって表示されます。

div {
  border: dashed 4px #000;
  padding: 20px;
  display: inline-block;
}
<div>I have a dashed border!</div>

大きな違い：IE 11/Firefox/Chrome

IE 11 borderFirefox BorderChrome border

破線の境界線の外観をより詳細に制御できる方法はありますか？

csscss3bordercss-shapes
106
AntonAL

Cssレンダリングはブラウザ固有であり、微調整はわかりません。Hamの推奨に従って画像を操作する必要があります。リファレンス： http://www.w3.org/TR/CSS2/box.html#border-style-properties

22
snowflake

ネイティブの破線の境界線プロパティ値では、ダッシュ自体を制御できません... border-imageプロパティを使用してください！

border-imageで独自の境界線を作成しました

互換性： 優れたブラウザーサポート （IE 11およびすべての最新ブラウザー）を提供します。通常の境界線は、古いブラウザーのフォールバックとして設定できます。

これらを作成しましょう

これらの境界線には、まったく同じクロスブラウザーが表示されます！

Goal exampleGoal example with wider gaps

ステップ1-適切な画像を作成する

この例は幅15ピクセル、高さ15ピクセルで、ギャップは現在5ピクセル幅です。これは、透過性のある.pngです。

これは、ズームインするとphotoshopでどのように見えるかです：

Example Border Image Background Blown Up

これは、スケーリングすると次のようになります。

Example Border Image Background Actual Size

ギャップとストローク長の制御

より広い/短いギャップまたはストロークを作成するには、画像のギャップまたはストロークを拡大/短縮します。

以下は、10pxのギャップの広い画像です。

Larger gaps 正しくスケーリング= Larger gaps to scale

ステップ2-CSSの作成—この例には4つの基本的なステップが必要です

  1. border-image-source を定義します：

    border-image-source:url("http://i.stack.imgur.com/wLdVc.png");

  2. オプション- border-image-width を定義します：

    border-image-width: 1;

    デフォルト値は1です。ピクセル値、パーセンテージ値、または別の倍数（1x、2x、3xなど）で設定することもできます。これは、border-widthセットをオーバーライドします。

  3. border-image-slice を定義します：

    この例では、画像の上下左右の境界線の太さは2pxであり、それらの外側にギャップがないため、スライス値は2です。

    border-image-slice: 2;

    スライスは、上、右、下、左から2ピクセルのようになります。

    Slices example

  4. 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>
136
misterManSam

border-imageプロパティに加えて、ストロークの長さとそれらの間の距離を制御する破線の境界線を作成するいくつかの他の方法があります。以下に説明します。

方法1：SVGを使用する

pathまたはpolygon要素を使用して stroke-dasharray プロパティを設定することにより、破線の境界線を作成できます。このプロパティは2つのパラメーターを取り、1つはダッシュのサイズを定義し、もう1つはそれらの間のスペースを決定します。

長所：

  1. SVGは本質的にスケーラブルなグラフィックであり、あらゆるコンテナ寸法に適応できます。
  2. border-radiusが関係していても非常にうまく機能します。 この回答 のようなpathをcircleに置き換えるだけです（または）pathを円に変換します。
  3. SVGのブラウザサポート は非常に優れており、VML for IE8を使用してフォールバックを提供できます。

短所：

  1. コンテナの寸法が比例して変化しない場合、パスは拡大縮小する傾向があり、その結果、ダッシュのサイズとそれらの間のスペースが変化します（スニペットの最初のボックスにカーソルを合わせてみてください）。これは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>

方法2：グラデーションを使用する

複数の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>

長所：

  1. スケーラブルで、コンテナの寸法が動的であっても適応できます。
  2. 余分な疑似要素を使用しません。つまり、他の潜在的な使用のためにそれらを脇に置いておくことができます。

短所：

  1. 線形グラデーションのブラウザサポート は比較的低く、IE 9-をサポートしたい場合はこれは不必要です。 CSS3 PIEのようなライブラリでさえ、IE8-でのグラデーションパターンの作成をサポートしていません。
  2. 背景はborder-radiusに基づいて湾曲しないため、border-radiusが含まれる場合は使用できません。代わりにクリップされます。

方法3：ボックスシャドウ

疑似要素を使用して（ダッシュの形の）小さなバーを作成し、その複数のbox-shadowバージョンを作成して、以下のスニペットのように境界線を作成できます。

ダッシュが正方形の場合、単一の疑似要素で十分ですが、長方形の場合は、上+下の境界に1つの疑似要素が必要で、左+右の境界に別の疑似要素が必要です。これは、上部の境界線のダッシュの高さと幅が左側のものと異なるためです。

長所：

  1. ダッシュの寸法は、擬似要素の寸法を変更することにより制御できます。間隔は、各シャドウ間のスペースを変更することで制御できます。
  2. 各ボックスシャドウに異なる色を追加することにより、非常にユニークな効果を生成できます。

短所：

  1. ダッシュの寸法と間隔を手動で設定する必要があるため、親ボックスの寸法が動的な場合、このアプローチは適切ではありません。
  2. IE8以前では support box shadow ではありません。ただし、これはCSS3 PIEなどのライブラリを使用することで克服できます。
  3. 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>
82
Harry

短いもの：いいえ、そうではありません。代わりに画像を使用する必要があります。

21
Ham Vocke