CSSでborder属性を使ったWebページの点線を作成する

この記事ではWebページのCSS制作における点線（border属性の使い方）を中心に紹介していますので、困っている方は

border属性の点線コントロール点線についてはこちらをご参照ください。以下で設定されている CSS の高さと CSS の幅は 350 ピクセルです。

1. 四辺に点線の境界線

border:1px 破線#000; 黒い点線の境界線

例:

CSSコード:

.hackhome{border:1px dashed #000; height:50px;width:350px}

HTMLコード: 四辺に黒い点線の境界線があります

ここに説明がありますハックホーム セレクターには、4 辺すべてに 1 ピクセルの黒い点線の境界線があります

2. 左側の点線:

CSS コード:

 .hackhome-1{border-left:1px dashed #000; height:50px;width:350px}

Html コード: 私の左側は黒い点線の境界線です

ここでは、左側に黒い点線の境界線を設定します

3. 右側は点線です:

CSS コード:

 .hackhome-2{border-right:1px dashed #000; height:50px;width:350px}

Html コード: 私の右側は黒い点線の境界線です

ここでは黒の点線を設定しました右側に点線の境界線があります

4. 上辺 (上端) は点線です:

CSS コード:

.hackhome-3{border-top:1px dashed #000; height:50px;width:350px}

Html コード: 上部に黒い点線の境界線があります

ここで上端を構成します(上端) 片側に黒い点線の境界線があります

5. 下端 (下端) は点線です:

CSS コード:

.hackhome-4{border-bottom:1px dashed #000; height:50px;width:350px}

Html コード: 下部に黒い点線の境界線があります

ここに一番下（下の線）の片側に黒い点線の境界線を設定します

6. 1 つの辺が点線でない場合、他の 3 つの辺は点線になります

エッジのない点線は含まれません。他の 3 つは含まれません。側面は黒い点線の境界線です

CSS コード:

 .hackhome-5{border:1px dashed #000;border-right:0; height:50px;width:350px}

Html コード: 私の右側の境界線には境界線がなく、他の 3 つの側面は黒い点線の境界線です

ここでは、オブジェクトは最初に 1 ピクセルの黒で 4 つの側面すべてに設定されています 点線の境界線を設定し、枠線の片側を 0 に設定します。これは、三方枠の点線属性を設定するのと同じですが、ここでは枠線属性を設定する前後の順序に注意してください

上記が全体の内容ですこの記事が皆さんの学習に役立つことを願っています。 ヘルプ。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。

関連する推奨事項:

CSS の使用方法 トランジション属性は、アニメーション付きの WeChat アプレット ウィジェットを実装します

Webpack が CSS を分離して個別にパッケージ化する方法

以上がCSSでborder属性を使ったWebページの点線を作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。