点線のボーダードット間のスペースを増やす方法


286

私のようなボックスで点線スタイルの境界線を使用しています

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

ボーダーの各ドットの間隔を広げたい。

回答:


444

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

/*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で試すか、コードスニペットの例を見てください。


26
選択した答えでなければなりません。
Kevin Jurkowski、2014年

7
imhoそれはn度のハックです。
Muhammad Umer 2015

7
同じことをしたいのですが、点線のボーダーの幅が1pxではなく3pxになり、点線ではなく正方形になりました。
Bhojendra Rauniyar

5
これを実装し、色と間隔をすばやく変更するために、SCSSミックスインを作成しました。github.com/florbraz/Dotted-Border-w-custom-spacing-SCSS-Mixinで確認してください。
Flor Braz、2015

5
4つのエッジすべてを破線にしたい場合はどうなりますか?
ライアン

141

ここに私が最近のプロジェクトで使用した、水平ボーダーでほぼすべてを実現するためのトリックがあります。<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*/
}

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

まあ、それは水平方向の境界線に本当に素晴らしい働きをします。垂直クラスが必要な場合は、別の時間のクラスを指定して、CSS3を使用できます。rotationプロパティます。


2
このクロスブラウザは互換性がありますか?
J82 2013年

57
私が維持することになるa **のどのような痛みを想像することはできません。
Kzqai 2013

1
垂直方向に同じ効果を得るにはどうすればよいですか?
りんくう

4
@Rinku with transform:rotate(90deg); 表示ブロック;
Jeroen K

4
とても醜いが、とても賢い:) height:0を設定すると、配置をより細かく制御できることにも気づきます。そして、パディングを使用して配置を制御します。だから私は下に少し余裕のある下部の点線が欲しかったので、パディングを使用しました:0 0 10px;
MatthewLee 14年

121

純粋なCSSではそれを行うことはできません。CSS3仕様には、これに関する具体的な引用さえあります。

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

ただし、枠画像または背景画像のいずれかを使用して、トリックを実行できます。


7
完全にカスタマイズ可能な境界線には、グラデーション(純粋なCSS)を使用できます。以下の回答を参照してください
Olivictor 2014年

3
-1、@ Shadikka、CSS3仕様ではborder: dotted、を使用してそれを行うことできませんが、Eagorajoseの回答が示しているように、勾配を使用してそれを実行すること可能です。
Pacerier 2014

30

これは、標準のCSSボーダーと疑似element + overflow:hiddenを使用します。この例では、3つの異なる2ピクセルの破線の境界線が表示されます。通常、5ピクセルの間隔、10ピクセルの間隔です。実際には10pxで、10-8 = 2pxしか表示されません。

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>

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


2
頑張れ!これは、IMOを維持するのにひどくなくても実際に機能する唯一の回答です。受け入れられた回答でさえ、divの1つのエッジでのみ機能します。これは国境全体で機能します。
ライアン

1
これは断然最良で最もエレガントな答えです。解決策としてマークする必要があります...
Beejee

19

したがって、与えられた答えから始めて、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は、ダッシュとギャップがカバーする領域を与えることに注意する価値があります。背景タグの50%は、ダッシュの実際の幅です。したがって、各ボーダー側に異なる長さのダッシュを付けることができます。


17

の使用可能な値については、MDNドキュメントを参照してくださいborder-style

  • none:境界線なし、幅を0に設定します。これはデフォルト値です。
  • hidden: 'none'と同じですが、テーブル要素の境界の競合解決の点が異なります。
  • 破線:一連の短いダッシュまたは線分。
  • dotted:一連のドット。
  • double:border-widthとして定義されたピクセル量になる2つの直線。
  • 溝:刻まれた効果。
  • inset:ボックスが埋め込まれて表示されます。
  • outset:「インセット」の反対。ボックスを3D(エンボス)で表示します。
  • 尾根:「溝」の反対側。境界線が3Dで表示されます(近づいてくる)。
  • solid:単一の直線の実線。

これらの選択を除いて、標準の境界線のスタイルに影響を与える方法はありません。

可能性が好みに合わない場合は、CSS3を使用できますborder-image、これに対するブラウザーのサポートはまだ非常に不安定です。


pekkaに感謝します。つまり、borderプロパティを使用できないので、画像を使用する必要があります。
Kali Charan Rajput

@kcボーダーのスタイルがどれもあなたの好みに合わない場合、はい。
ペッカ

8

@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>


8

これは古いですが、非常に関連性の高いトピックです。現在のトップの答えはなく、唯一の非常に小さなドットのため、うまく動作します。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 期待

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

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

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


6

これは本当に古い質問ですが、Googleで上位にランクされているので、必要に応じて機能する私のメソッドを投入します。

私の場合、ダッシュの間の切れ目が最小限の太い破線の境界線が必要でした。CSSパターンジェネレーター(この例:http : //www.patternify.com/)を使用して、幅10px、高さ1pxのパターンを作成しました。その9pxは実線のダッシュ色で、1pxは白です。

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

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



2

多くの人が「できない」と言っています。はい、できます。ダッシュ間のガタースペースを制御する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%;
}

基本的に、ボーダー上部の高さ(この場合は5px)は、ガターの「幅」を決定するルールです。OIfもちろん、ニーズに合わせて色を調整する必要があります。これも水平線の小さな例です。左右を使用して垂直線を作成します。


1
公平を期すために、ほとんどの人は、境界線の点線のスタイルを調整するという文字通りの質問にそれを行うことはできないと言っていると思います。他のCSSプロパティを使用して同様のことを行うことはできないと彼らは言っていません。私の意見では、セマンティックの観点からは、他の人が示したように背景画像や境界線画像を使用する方が、疑似要素や数十行のCSSを使用するよりもはるかに理にかなっています。
Alex

2

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>


1

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

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

整列させるには、位置を微調整する必要がありますが、機能します。境界線の太さ、開始サイズ、およびスケールファクターを変更することで、希望する太さと長さの比率をほぼ得ることができます。触れられないのはダッシュとギャップの比率だけです。


そうすることでコンテンツも適用されますscale(8)
Pardeep Jain '

ボーダー:1px黒の破線; Chromeブラウザでは不明なプロパティと見なされます。
Inzmam ul Hassan


0

私の知る限り、これを行う方法はありません。破線のボーダーを使用したり、ボーダーの幅を少し増やしたりすることができますが、CSSではドットの間隔を広げることは不可能です。


0

(JavaScriptを介して)キャンバスを作成し、その中に点線を描画できます。キャンバス内では、ダッシュとその間のスペースの長さを制御できます。


これは非常に複雑なソリューションです。ページ上の残りのJSの重みに応じて、パフォーマンスと認識される読み込み時間も少し増えると感じざるを得ません。
Emmett R.
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.