CSSでhrのスタイルを設定するにはどうすればよいですか? css タグの複数のスタイル (グラフィックとテキスト)

HTML Web ページを美しくする場合は、hr タグを使用してページを変更する必要があります。ただし、経験豊富なフロントエンド作業者は、デフォルトの hr タグ スタイルを使用します。 hr タグに対していくつかの美化操作を実行するスタイル。では、CSS で hr タグのスタイルを設定するにはどうすればよいでしょうか?この章では、CSS で hr タグを設定するいくつかのスタイルを紹介します。困っている友人は参考にしていただければ幸いです。

1. hr とは何ですか?

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

---

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

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

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

2. css で hr スタイルを設定する

css で hr スタイルを設定するにはどうすればよいですか?実際、hr のスタイルは css border プロパティ と css background-image プロパティ を使用して設定できます。

1.css は太さを設定します。 hr の (太字) color

<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 凹槽-->

の 3D 三次元スタイルを設定します

5.css hr

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 を通じて実現することもできます。誰でも試してみることができます。

以上がCSSでhrのスタイルを設定するにはどうすればよいですか? css

---

タグの複数のスタイル (グラフィックとテキスト)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。