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

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

---

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

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

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

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

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

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

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

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

1.css は、hr

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

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

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

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

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

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 サイトの他の関連記事を参照してください。