web-dev-qa-db-ja.com

点線のドットの間隔を広げる方法

私は私の箱のように点線スタイルのボーダーを使っています

.box {
    width: 300px;
    height: 200px;
    border: dotted 1px #f00;
    float: left;
}

ボーダーの各ドット間のスペースを増やしたいです。

htmlcsscss3border
248
Kali Charan Rajput

このトリックは、水平方向と垂直方向の両方の境界で機能します。

/*Horizontal*/
background-image: linear-gradient(to right, black 33%, rgba(255,255,255,0) 0%);
background-position: bottom;
background-size: 3px 1px;
background-repeat: repeat-x;

/*Vertical*/
background-image: linear-gradient(black 33%, rgba(255,255,255,0) 0%);
background-position: right;
background-size: 1px 3px;
background-repeat: repeat-y;

サイズはbackground-sizeで、比率は線形グラデーションの割合で調整できます。この例では、1pxドットと2px間隔の点線があります。これにより、複数の背景を使用して複数の点線の境界線を作成することもできます。

これを試す JSFiddle 、またはコードスニペットの例を見てください。

div {
  padding: 10px 50px;
}
.dotted {
  border-top: 1px #333 dotted;
}
.dotted-gradient {
  background-image: linear-gradient(to right, #333 40%, rgba(255, 255, 255, 0) 20%);
  background-position: top;
  background-size: 3px 1px;
  background-repeat: repeat-x;
}
.dotted-spaced {
  background-image: linear-gradient(to right, #333 10%, rgba(255, 255, 255, 0) 0%);
  background-position: top;
  background-size: 10px 1px;
  background-repeat: repeat-x;
}
.left {
  float: left;
  padding: 40px 10px;
  background-color: #F0F0DA;
}
.left.dotted {
  border-left: 1px #333 dotted;
  border-top: none;
}
.left.dotted-gradient {
  background-image: linear-gradient(to bottom, #333 40%, rgba(255, 255, 255, 0) 20%);
  background-position: left;
  background-size: 1px 3px;
  background-repeat: repeat-y;
}
.left.dotted-spaced {
  background-image: linear-gradient(to bottom, #333 10%, rgba(255, 255, 255, 0) 0%);
  background-position: left;
  background-size: 1px 10px;
  background-repeat: repeat-y;
}
<div>no
  <br>border</div>
<div class='dotted'>dotted
  <br>border</div>
<div class='dotted-gradient'>dotted
  <br>with gradient</div>
<div class='dotted-spaced'>dotted
  <br>spaced</div>

<div class='left'>no
  <br>border</div>
<div class='dotted left'>dotted
  <br>border</div>
<div class='dotted-gradient left'>dotted
  <br>with gradient</div>
<div class='dotted-spaced left'>dotted
  <br>spaced</div>
371
Eagorajose

これが私が最近のプロジェクトで私が水平方向の境界線で欲しいものをほとんど達成するために使ったトリックです。水平方向の境界線が必要になるたびに<hr/>を使用します。このhrに境界線を追加する基本的な方法は次のようなものです。

 hr {border-bottom: 1px dotted #000;}

しかし、ボーダーを制御したい場合、そして例えばドット間のスペースを増やしたい場合は、次のようにして試すことができます。

hr {
height:14px; /* specify a height for this hr */
overflow:hidden;
}

そして、以下では、あなたはあなたの境界線を作成します（これはドットでの例です）

hr:after {
content:".......................................................................";
letter-spacing: 4px; /* Use letter-spacing to increase space between dots*/
}

これはまた、ドットやグラデーションなどにテキストシャドウを追加できることを意味します。

まあ、それは水平方向の境界線のために本当に素晴らしい作品。縦型のものが必要な場合は、別のhrにクラスを指定してCSS3のrotationプロパティを使用できます。

136
Matt

純粋なCSSではできません - CSS3の仕様 にも、これに関する具体的な引用があります。

注意：ドットとダッシュの間隔、およびダッシュの長さを制御することはできません。実装は、角を対称にする間隔を選択することをお勧めします。

ただし、 border-image またはトリックを実行する背景画像を使用できます。

116
Shadikka

これは標準のCSSボーダーと疑似要素+ overflow：hiddenを使います。この例では、3つの異なる2px破線の境界線が表示されます。通常、5pxのように間隔を空け、10pxのように間隔を空けています。 10-8 = 2pxしか見えず、実際には10pxです。

div.two{border:2px dashed #FF0000}

div.five:before {
  content: "";
  position: absolute;
  border: 5px dashed #FF0000;
  top: -3px;
  bottom: -3px;
  left: -3px;
  right: -3px;
}

div.ten:before {
  content: "";
  position: absolute;
  border: 10px dashed #FF0000;
  top: -8px;
  bottom: -8px;
  left: -8px;
  right: -8px;
}

div.odd:before {left:0;right:0;border-radius:60px}

div {
  overflow: hidden;
  position: relative;


  text-align:center;
  padding:10px;
  margin-bottom:20px;
}
<div class="two">Kupo nuts here</div>
<div class="five">Kupo nuts<br/>here</div>
<div class="ten">Kupo<br/>nuts<br/>here</div>
<div class="ten odd">Kupo<br/>nuts<br/>here</div>

大きな角の丸い小さな要素に適用すると、いくつかの楽しい効果が得られます。

17
lenioia

border-styleに使用できる値については、 MDNのドキュメント を参照してください。

  • none：境界線なし、widthを0に設定します。これはデフォルト値です。
  • hidden：テーブル要素のボーダーコンフリクト解決の点を除いて 'none'と同じです。
  • 破線：一連の短い破線または線分。
  • 点線：一連の点。
  • double：2つの直線が境界線の幅として定義されたピクセル量になります。
  • グルーブ：彫刻効果.
  • インセット：ボックスを埋め込んで表示します。
  • outset： 'inset'の反対です。ボックスを3D（エンボス加工）にします。
  • 尾根：「溝」の反対側。枠が3Dで表示されます（出てきます）。
  • 実線：単線、直線、実線.

これらの選択以外に、標準の枠線のスタイルに影響を与える方法はありません。

あなたの好みに合わない可能性があるなら、あなたはcould CSS3の border-image を使うでしょうが、これに対するブラウザサポートはまだ非常にむらがあることに注意してください。

17
Pekka 웃

それで、与えられた答えから始めて、CSS3が複数の設定を許すという事実を適用する - 以下のコードは完全な箱を作成するために役に立ちます：

#border {
  width: 200px;
  height: 100px;
  background: yellow;
  text-align: center;
  line-height: 100px;
  background: linear-gradient(to right, orange 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(blue 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(to right, green 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(red 50%, rgba(255, 255, 255, 0) 0%);
  background-position: top, right, bottom, left;
  background-repeat: repeat-x, repeat-y;
  background-size: 10px 1px, 1px 10px;
}
<div id="border">
  bordered area
</div>

背景サイズの10pxがダッシュとギャップがカバーする領域を与えることは注目に値します。 backgroundタグの50％は、ダッシュが実際にどれだけ広いかということです。したがって、各境界線側に異なる長さのダッシュを付けることができます。

9
Ukuser32

これは非常に古い質問ですが、Googleでは上位にランクされているため、私の方法を使用します。これは、ニーズに応じて機能する可能性があります。

私の場合は、ダッシュの間に最小の切れ目がある太い破線の境界線が必要でした。私はCSSパターンジェネレータ（このように： http://www.patternify.com/ ）を使用して、幅10ピクセル、高さ1ピクセルのパターンを作成しました。その9pxは無地のダッシュカラーで、1pxは白です。

私のCSSでは、そのパターンを背景画像として含めてから、background-size属性を使用して拡大しました。私は20ピクセルx 2ピクセルのダッシュを繰り返しましたが、そのうちの18ピクセルは実線で、2ピクセルは白です。あなたは本当に太い破線のためにさらにそれを拡大することができました。

いいことは、画像が追加の外部HTTPリクエストを持たないデータとしてエンコードされているので、パフォーマンスの負担がないということです。私は自分のイメージをSASS変数として保存したので、自分のサイトでそれを再利用することができました。

6
Nick Angiolillo

これは古いですが、まだ非常に関連性のあるトピックです。 現在のトップアンサー はうまく機能しますが、非常に小さなドットに対してのみです。 Bhojendra Rauniyarはすでにコメントで指摘しているように、より大きい（> 2px）ドットの場合、ドットは丸くではなく正方形に見えます。このページでは、スペースドットを検索し、スペース正方形は検索していません（ここではいくつかの回答で使用されているダッシュ）.

これを踏まえて、私はradial-gradientを使いました。また、 Ukuser32からの回答 を使用すると、ドットプロパティは4つの境界すべてに対して簡単に繰り返すことができます。角だけが完璧ではありません。

div {
    padding: 1em;
    background-image:
        radial-gradient(circle at 2.5px, #000 1.25px, rgba(255,255,255,0) 2.5px),
        radial-gradient(circle, #000 1.25px, rgba(255,255,255,0) 2.5px),
        radial-gradient(circle at 2.5px, #000 1.25px, rgba(255,255,255,0) 2.5px),
        radial-gradient(circle, #000 1.25px, rgba(255,255,255,0) 2.5px);
    background-position: top, right, bottom, left;
    background-size: 15px 5px, 5px 15px;
    background-repeat: repeat-x, repeat-y;
}
<div>Some content with round, spaced dots as border</div>

radial-gradientには が必要です。

  • 形状とオプションの position
  • 2つ以上のストップ：色と半径

ここでは、直径5ピクセル（半径2.5ピクセル）のドットが必要です。ドット間の直径（10ピクセル）の2倍で、合計15ピクセルになります。 background-sizeはこれらと一致するはずです。

2つのストップは、ドットが滑らかで滑らかになるように定義されています。半径の半分は黒で、半径全体へのグラデーションは黒です。

4
Marten Koetsier

非常に多くの人が「あなたはできません」と言っています。はい、できます。ダッシュ間のガタースペースを制御するCSSルールはありませんが、CSSには他の機能もあります。できることができないということを早く言ってはいけません。

.hr {
    border-top: 5px dashed #CFCBCC;
    margin: 30px 0;
    position: relative;
}

.hr:before {
    background-color: #FFFFFF;
    content: "";
    height: 10px;
    position: absolute;
    top: -2px;
    width: 100%;
}

.hr:after {
    background-color: #FFFFFF;
    content: "";
    height: 10px;
    position: absolute;
    top: -13px;
    width: 100%;
}

基本的に、ボーダートップの高さ（この場合は5ピクセル）がガターの「幅」を決定するルールです。もちろん、自分のニーズに合わせて色を調整する必要があります。これも水平線の小さな例です。垂直線を作るには左右を使います。

2
devinfd

簡略化された構文で@ Eagorajoseの答えに基づいて4つのエッジを持つ解を構築する：

background: linear-gradient(to right, #000 33%, #fff 0%) top/10px 1px repeat-x, /* top */
linear-gradient(#000 33%, #fff 0%) right/1px 10px repeat-y, /* right */
linear-gradient(to right, #000 33%, #fff 0%) bottom/10px 1px repeat-x, /* bottom */
linear-gradient(#000 33%, #fff 0%) left/1px 10px repeat-y; /* left */

#page {
    background: linear-gradient(to right, #000 33%, #fff 0%) top/10px 1px repeat-x, /* top */
    linear-gradient(#000 33%, #fff 0%) right/1px 10px repeat-y, /* right */
    linear-gradient(to right, #000 33%, #fff 0%) bottom/10px 1px repeat-x, /* bottom */
    linear-gradient(#000 33%, #fff 0%) left/1px 10px repeat-y; /* left */
    
    width: 100px;
    height: 100px;
}
<div id="page"></div>
2
Aleksander Stelmaczonek

短い答え：できません。

あなたは border-image プロパティといくつかの画像を使わなければなりません。

2
Crozin

最新のブラウザのみをターゲットにしている場合、およびコンテンツとは別の要素に境界線を設定できる場合は、CSSスケール変換を使用してより大きなドットまたはダッシュを取得できます。

border: 1px dashed black;
border-radius: 10px;
-webkit-transform: scale(8);
transform: scale(8);

整列させるには、位置を微調整するのに多くの時間がかかりますが、うまくいきます。境界線の太さ、開始サイズ、および拡大縮小率を変更することで、必要な太さと長さの比率を設定できます。あなたが触れることができない唯一のものはダッシュとギャップの比率です。

2
Dave

キャンバスを作成し（javascript経由で）、その中に点線を引きます。キャンバス内で、ダッシュとその間のスペースの長さを制御できます。

0
velop

Svgでドットを作成するjavascript関数を作成しました。 JavaScriptコードでドットの間隔とサイズを調整できます。

var make_dotted_borders = function() {
    // EDIT THESE SETTINGS:
    
    var spacing = 8;
    var dot_width = 2;
    var dot_height = 2;
    
    //---------------------

    var dotteds = document.getElementsByClassName("dotted");
    for (var i = 0; i < dotteds.length; i++) {
        var width = dotteds[i].clientWidth + 1.5;
        var height = dotteds[i].clientHeight;

        var horizontal_count = Math.floor(width / spacing);
        var h_spacing_percent = 100 / horizontal_count;
        var h_subtraction_percent = ((dot_width / 2) / width) * 100;

        var vertical_count = Math.floor(height / spacing);
        var v_spacing_percent = 100 / vertical_count;
        var v_subtraction_percent = ((dot_height / 2) / height) * 100;

        var dot_container = document.createElement("div");
        dot_container.classList.add("dot_container");
        dot_container.style.display = getComputedStyle(dotteds[i], null).display;

        var clone = dotteds[i].cloneNode(true);

        dotteds[i].parentElement.replaceChild(dot_container, dotteds[i]);
        dot_container.appendChild(clone);

        for (var x = 0; x < horizontal_count; x++) {
            // The Top Dots
            var dot = document.createElement("div");
            dot.classList.add("dot");
            dot.style.width = dot_width + "px";
            dot.style.height = dot_height + "px";

            var left_percent = (h_spacing_percent * x) - h_subtraction_percent;
            dot.style.left = left_percent + "%";
            dot.style.top = (-dot_height / 2) + "px";
            dot_container.appendChild(dot);

            // The Bottom Dots
            var dot = document.createElement("div");
            dot.classList.add("dot");
            dot.style.width = dot_width + "px";
            dot.style.height = dot_height + "px";

            dot.style.left = (h_spacing_percent * x) - h_subtraction_percent + "%";
            dot.style.top = height - (dot_height / 2) + "px";
            dot_container.appendChild(dot);
        }

        for (var y = 1; y < vertical_count; y++) {
            // The Left Dots:
            var dot = document.createElement("div");
            dot.classList.add("dot");
            dot.style.width = dot_width + "px";
            dot.style.height = dot_height + "px";

            dot.style.left = (-dot_width / 2) + "px";
            dot.style.top = (v_spacing_percent * y) - v_subtraction_percent + "%";
            dot_container.appendChild(dot);
        }
        for (var y = 0; y < vertical_count + 1; y++) {
            // The Right Dots:
            var dot = document.createElement("div");
            dot.classList.add("dot");
            dot.style.width = dot_width + "px";
            dot.style.height = dot_height + "px";

            dot.style.left = width - (dot_width / 2) + "px";
            if (y < vertical_count) {
                dot.style.top = (v_spacing_percent * y) - v_subtraction_percent + "%";
            }
            else {
                dot.style.top = height - (dot_height / 2) + "px";
            }

            dot_container.appendChild(dot);
        }
    }
}

make_dotted_borders();
div.dotted {
    display: inline-block;
    padding: 0.5em;
}

div.dot_container {
    position: relative;
    margin-left: 0.25em;
    margin-right: 0.25em;
}

div.dot {
    position: absolute;
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100"><circle cx="50" cy="50" r="50" fill="black" /></svg>');
}
<div class="dotted">Lorem Ipsum</div>
0
dmodo

これを行う方法はありません。破線の枠線を使用したり、枠線の幅を少し広げたりすることもできますが、CSSでは、ドットの間隔を広げるだけでは不可能です。

0
Bojangles
<div style="width: 100%; height: 100vh; max-height: 20px; max-width: 100%; background: url('https://kajabi-storefronts-production.global.ssl.fastly.net/kajabi-storefronts-production/themes/853636/settings_images/Ei2yf3t7TvyRpFaLQZiX_dot.jpg') #000; background-repeat: repeat;">&nbsp;</div>

これは私がやったことです - 画像を使用する ここに画像の説明を入力してください

0
Christine Nicole Yu