html5のhrタグにcssは使用できますか？

HTML5 では、hr タグは css でスタイル設定できます。css スタイルは、HTML 要素の表示方法を定義できます。style 属性を使用して、hr 要素に css スタイルを設定するだけです。構文は "

---

" または "hr{css スタイル コード;}"。

このチュートリアルの動作環境: Windows 10 システム、HTML5 バージョン、Dell G3 コンピューター。

HTML5 の hr タグに CSS を使用できますか?

簡単に言うと、hr は HTML ページ上の水平の分割線 (横罫線) で、文書を視覚的にさまざまな部分に分けることができます。 . .

---

タグを使用して HTML ページ内に作成する必要があります。

次に、デフォルトの hr タグ スタイルを見てみましょう。

は単なる黒い線で、< を使用することはおろか、まったく美しくありません。 ;hr> ページが美しくなったので、css を使用して hr のスタイルを設定する必要があります。

css を使用して hr スタイルを設定する

css を使用して hr スタイルを設定するにはどうすればよいですか?実際、これは非常に簡単です。CSS の border 属性と CSS の背景画像属性を使用して hr のスタイルを設定できます:

1.css は、hr

<hr style="border: 5px solid red;"/><!--修改的样式-->
<br />
<hr /><!--默认的样式-->

の太さ (太字) と色を設定します。

2.css は hr の破線スタイルを設定します (色は青)

<hr style="height:1px;border:none;border-top:1px dashed #0066CC;"/>

3.css は二重線を設定しますhr

<hr style="height:3px;border:none;border-top:3px double red;"/>

##4.css のスタイルで、hr

<hr style=" height:5px;border:none;border-top:5px ridge green;"/><!--3D 垄状-->
<hr style=" height:10px;border:none;border-top:10px groove skyblue;"/><!--3D 凹槽-->

5 の 3D 立体スタイルを設定します。 hr

のグラデーション スタイルを設定する css HTML コード:

<hr class="style-one"/>
<br/>
<hr class="style-two"/>

css コード:

hr.style-one {/*透明渐变水平线*/
 width:80%;
 margin:0 auto;
 border: 0;
 height: 4px;
 background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
hr.style-two{/*渐变*/
 width:80%;
 margin:0 auto;
 border: 0;
 height: 4px;
 background: #333;
 background-image: linear-gradient(to right, red, #333, rgb(9, 206, 91));
}

上記は、簡単な例のほんの一部です例. hr タグのスタイルは CSS を通じて実現することもできます。誰でも試してみることができます。

推奨チュートリアル: 「html ビデオ チュートリアル 」

以上がhtml5のhrタグにcssは使用できますか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。