1.効果
まず、以下の図に示す実装効果を見てください。
- 点線の効果は 3 つの方法で実現されます:クリックしてデモ コードを表示します。
2. 実現
1. ボーダー属性
mdn の境界線borderを見ると、これを使用して次のプロパティの 1 つ以上の値を設定できることがわかります: border-width、border-style、border-color。
border-style点線効果を設定するために使用して、境界線のスタイルを設定できますdashed。
実装コード:
divのスタイルを設定する
.box {height: 100px;line-height: 100px;margin-bottom: 20px;
}
<div className="box line1">虚线1</div>
以下を実装するために使用しますborder。
/*虚线1 css*/
.line1 {border: 1px dashed red;
}
2.背景と線形グラデーションを上手に使う
前回の記事「CSSで枠線の枠線の色のグラデーション効果を設定する」ではlinear-gradientの使い方を詳しく紹介しましたので、よく分からない人はまずここから学んでみてはいかがでしょうか。
まず実装コードを見てみましょう。
<div className="box line2">虚线2</div>
/*虚线2 css*/
.line2 {background: linear-gradient(to left,transparent 0%,transparent 50%,#ccc 50%,#ccc 100%);background-size: 10px 1px;background-repeat: repeat-x;
}
CSS を逆アセンブルして見てみましょう。
1) 最初に背景を設定します
背景属性は、 1 つの宣言で 1 つ以上の属性 ( 、、、、、、、および) を定義できる短縮属性です。background-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizebackground-attachment
background: linear-gradient(to left,/*to结束的方向*/transparent 0%,transparent 50%,#ccc 50%,#ccc 100%
);
linear-gradient()2 色以上の線形グラデーションを表す画像を作成するために使用される関数。結果は<gradient>、特殊なデータ型であるデータ型に属します<image>。
この CSS の意味は次のとおりです。
to lefttoは終了方向を表すので、ここでは右から左へのグラデーションを表します。transparent 0%,transparent 50%,0% の位置から 50% の位置まで透明になります。#ccc 50%,#ccc 100%50% の位置から 100% の位置までが色です#ccc。- 実際、この設定は次と同等であることが理解できます。
background-image
効果は次のとおりです。
2) 次に、背景サイズを設定します。
background-size: 10px 1px;
背景画像のサイズを幅 10 ピクセル、高さ 1 ピクセルに設定します。効果は次のようになります。
どうしてこれなの？
linear-gradient前の手順で属性のグラデーション ポイントをパーセンテージに設定したため、 の影響background-sizeを受けます。実際、各「グレー」の幅は 10px です。高さが非常に長く見えるのは、 のせいですbackground-repeat。
また、backgroundプロパティのbackground-repeatデフォルト値はrepeat(背景画像は垂直方向と水平方向の両方で繰り返されます) です。つまり、上記の効果が表示されます。破線を取得するにはどうすればよいですか?
3) バックグラウンドリピートを設定する
background-repeat: repeat-x; /*背景图像将在水平方向重复。*/
次に、破線が得られます。
上記の設定ではbackground-size高さが1pxなので、x（横）方向に1pxに応じて繰り返されます。次に、破線が表示されます。これを設定するとbackground-size: 10px 10px、x 方向に繰り返す効果は次のようになります。
このようにして、実装した点線は、必要に応じて点線の間隔と高さを調整できます。
3. 背景クリップを上手に活用する
実際、この考え方は上記の方法と非常に似ています。
まず実装コードを見てみましょう。
<div className="box line3">虚线3</div>
/*虚线3 css*/
.line3 {border: 1px solid transparent;background: linear-gradient(white, white) padding-box,repeating-linear-gradient(-45deg,#e5e5e5 0,#e5e5e5 3px,white 0,white 5px);
}
CSS を逆アセンブルして見てみましょう。
1) 最初に背景を設定します
background: linear-gradient(white, white) padding-box,repeating-linear-gradient(-45deg,#ccc 0,#ccc 3px,white 0,white 5px);
- まず、
linear-gradient(white, white)デフォルトではグラデーションが上から下まで白であることを意味します。 padding-boxこれは、設定された要素の背景 (背景画像または色) がボーダー、パディング ボックス、およびコンテンツ ボックスの下に及ぶかどうかを設定するために使用される middle 属性ですbackground。background-clip- 注: デフォルト値は
border-box;次のとおりです。
背景色と区別するために、背景をグレーに設定しました。最初のステップの効果は次のようになります。
- 次に、線形の繰り返しグラデーション効果を実現するために を設定します
repeating-linear-gradient。 * グラデーション軸は -45 度、右下隅から左上隅へのグラデーション * 0 ～ 3px の位置は #ccc の色です * からの位置0 ～ 5px は白です* この方法では、グレーの幅 3 ピクセル、白の間隔 2 ピクセルの繰り返し効果を得ることができます (必要に応じてここで点線の幅と間隔を設定できます)* ここでのデフォルトは実際にbackground-clipはborder-box
効果は次の図に示されています。
ここで設定するlinear-gradientと は、repeating-linear-gradient背景画像を 2 つ設定することに相当します。以降の設定は以前の設定によって上書きされます。したがって、エフェクトを設定した後に表示されるのは実際には白です。
では、どうやって破線を取得するのでしょうか?
2) 境界線を設定する
border: 1px solid transparent; /*设置透明边框*/
上で言ったことを思い出してくださいbackground-clip。実際、それはここで使用されています
background-clip: border-box; /*背景延伸至边框外沿（但是在边框下层）*/
background-clip: padding-box; /*背景延伸至内边距 padding 外沿。不会绘制到边框处。*/
これら 2 つのプロパティの違いは、まさに境界線と点線効果の特性の違いです。
片側のみを表示したい場合は、div ボックスの高さをより小さく設定し、境界線の片側のみを設定します。たとえば、次のようになります。
/*只设置一个边*/
.line3 {height: 2px;border-top: 1px solid transparent;background: linear-gradient(white, white) padding-box,repeating-linear-gradient(-45deg, #ccc 0, #ccc 3px, white 0, white 5px);
}
要約すると、3 つの方法で点線境界線を実装しました。
やっと
ネットワーク セキュリティに触れたことのない学生のために、詳細な学習と成長のロードマップを用意しました。これは最も科学的で体系的な学習ルートと言え、誰もがこの大まかな方向性に従って問題なく学習することができます。
同時に、成長ルートに応じたセクションごとにサポートビデオを提供します。
サポートビデオはもちろん、さまざまなドキュメント、書籍、資料やツールもすべての人に向けて整理され、カテゴリーに分けられています。みんな。
スペースに限りがあるため、情報の一部のみが表示されています。情報が必要な友達は [下のカードをクリック] して無料で入手できます。