私のようなボックスで点線スタイルの境界線を使用しています
.box {
width: 300px;
height: 200px;
border: dotted 1px #f00;
float: left;
}
ボーダーの各ドットの間隔を広げたい。
私のようなボックスで点線スタイルの境界線を使用しています
.box {
width: 300px;
height: 200px;
border: dotted 1px #f00;
float: left;
}
ボーダーの各ドットの間隔を広げたい。
回答:
このトリックは、水平境界と垂直境界の両方で機能します。
/*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で試すか、コードスニペットの例を見てください。
ここに私が最近のプロジェクトで使用した、水平ボーダーでほぼすべてを実現するためのトリックがあります。<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
プロパティます。
純粋なCSSではそれを行うことはできません。CSS3仕様には、これに関する具体的な引用さえあります。
注:ドットとダッシュの間隔、およびダッシュの長さは制御できません。実装では、コーナーを対称にする間隔を選択することをお勧めします。
ただし、枠画像または背景画像のいずれかを使用して、トリックを実行できます。
border: dotted
、を使用してそれを行うことはできませんが、Eagorajoseの回答が示しているように、勾配を使用してそれを実行することは可能です。
これは、標準の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>
大きな角の丸い小さな要素に適用すると、楽しい効果が得られる場合があります。
したがって、与えられた答えから始めて、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%は、ダッシュの実際の幅です。したがって、各ボーダー側に異なる長さのダッシュを付けることができます。
の使用可能な値については、MDNドキュメントを参照してくださいborder-style
。
- none:境界線なし、幅を0に設定します。これはデフォルト値です。
- hidden: 'none'と同じですが、テーブル要素の境界の競合解決の点が異なります。
- 破線:一連の短いダッシュまたは線分。
- dotted:一連のドット。
- double:border-widthとして定義されたピクセル量になる2つの直線。
- 溝:刻まれた効果。
- inset:ボックスが埋め込まれて表示されます。
- outset:「インセット」の反対。ボックスを3D(エンボス)で表示します。
- 尾根:「溝」の反対側。境界線が3Dで表示されます(近づいてくる)。
- solid:単一の直線の実線。
これらの選択を除いて、標準の境界線のスタイルに影響を与える方法はありません。
可能性が好みに合わない場合は、CSS3を使用できますがborder-image
、これに対するブラウザーのサポートはまだ非常に不安定です。
@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>
これは古いですが、非常に関連性の高いトピックです。現在のトップの答えはなく、唯一の非常に小さなドットのため、うまく動作します。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
期待:
ここでは、5ピクセルの直径(半径2.5ピクセル)のドットが必要でした。ドット間の直径(10ピクセル)の2倍、合計で15ピクセルになります。これらbackground-size
は一致する必要があります。
2つのストップは、ドットが滑らかで滑らかになるように定義されています。半径の半分は黒一色で、半径全体へのグラデーションよりも黒くなっています。
これは本当に古い質問ですが、Googleで上位にランクされているので、必要に応じて機能する私のメソッドを投入します。
私の場合、ダッシュの間の切れ目が最小限の太い破線の境界線が必要でした。CSSパターンジェネレーター(この例:http : //www.patternify.com/)を使用して、幅10px、高さ1pxのパターンを作成しました。その9pxは実線のダッシュ色で、1pxは白です。
私のCSSでは、そのパターンを背景画像として含め、background-size属性を使用して拡大しました。最終的に、20px x 2pxのダッシュが繰り返され、そのうち18pxが実線、2pxが白になります。本当に太い破線の場合は、さらに拡大できます。
良い点は、画像が外部のHTTPリクエストを持たないデータとしてエンコードされているため、パフォーマンスの負担がないことです。画像をSASS変数として保存し、サイトで再利用できるようにしました。
短い答え:できません。
border-image
プロパティといくつかの画像を使用する必要があります。
多くの人が「できない」と言っています。はい、できます。ダッシュ間のガタースペースを制御する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もちろん、ニーズに合わせて色を調整する必要があります。これも水平線の小さな例です。左右を使用して垂直線を作成します。
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>
最新のブラウザーのみを対象とし、コンテンツとは別の要素に境界線を設定できる場合は、CSSスケール変換を使用して大きなドットまたはダッシュを取得できます。
border: 1px dashed black;
border-radius: 10px;
-webkit-transform: scale(8);
transform: scale(8);
整列させるには、位置を微調整する必要がありますが、機能します。境界線の太さ、開始サイズ、およびスケールファクターを変更することで、希望する太さと長さの比率をほぼ得ることができます。触れられないのはダッシュとギャップの比率だけです。
scale(8)
<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;"> </div>
これは私がやったことです-画像を使用して ここに画像の説明を入力してください