ホームページ > 記事 > ウェブフロントエンド > HTMLで横線のhr色を記述する方法
HTMLで横線のhr色を記述する方法
- 青灯夜游オリジナル
- 2021-03-02 17:16:136560ブラウズ
HTML では、border-color 属性を使用して水平線 hr の色を設定できます。hr タグに「border-color: color value;」スタイルを追加するだけです。 border-color 属性は、要素の境界線の色を設定するために使用されます。1 つの宣言で要素の 4 つの境界線の色を設定できます。つまり、この属性は 1 ～ 4 つの値を持つことができます。
このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。
タグは、HTML ページ内のトピックの変更 (トピックの転送など) を定義し、水平線として表示されます。
要素は、HTML ページ内のコンテンツを分離する (またはバリエーションを定義する) ために使用されます。
デフォルトの hr タグ スタイル:
は単なる黒い線で、まったく美しくありません。CSS の border-color プロパティを使用できます。色を設定します。
<hr style="border-color: red"/>
レンダリング:
border-color 属性の概要
border-color 属性の設定要素の 4 つの境界線の色。このプロパティには 1 ～ 4 つの値を指定できます。
属性値:
color 背景色を指定します。
transparent 境界線の色を透明にすることを指定します。これはデフォルトです。
CSS3 でサポートされている色表現方法
- は、色の英語名で表されます。英語の名前は色を表しますが、その表現は非常に限られており、覚えたり調べたりするのが困難です。
- は hex の色で表されます。色の三原色と光の原理を表で調べることができます。
- は rgb (r, g, b) で表されます。光の三原色、赤、緑、青の原理。
- はhsl(色相、彩度、明度)で表されます。色相、彩度、明るさ。
- は rgba (r, g, b, a) で表されます。光の三原色、赤、緑、青、透明の原理。 a ∈ [0, 1]、0 は完全な透明性を表します。
- は hsla (色相、彩度、明度、アルファ) で表されます。色相、彩度、明度、透明度。 alpha ∈ [0, 1]、0 は完全な透明度を表します。
例:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html" ;charset="utf-8">
<title>CSS颜色表示</title>
<style type="text/css">
div>div{
width: 400px;
height: 40px;
}
</style>
</head>
<body>
<script type="text/javascript">
for (var i = 0; i < 300; i++) {
document.write("CSS颜色表示");
}
</script>
<div style="position:absolute;top:0px">
<div style="background-color:gray;">
background-color:gray
</div>
<div style="background-color:#ff4314;">
background-color:#888
</div>
<div style="background-color:#ffff00;">
background-color:#ffff00
</div>
<div style="background-color:rgb(0, 255, 255);">
background-color:rgb(0, 255, 255)
</div>
<div style="background-color:hsl(120, 100%, 50%);">
background-color:hsl(120, 100%, 50%)
</div>
<div style="background-color:rgba(0, 255, 255, 0.5);">
background-color:rgba(0, 255, 255, 0.5)
</div>
<div style="background-color:hsla(120, 100%, 50%, 0.5);">
background-color:hsla(120, 100%, 50%, 0.5)
</div>
</div>
</body>
</html>Web ページ表示
説明: 最後にテキストを追加するのは、確認のためです。透明性。
(学習ビデオ共有: css ビデオ チュートリアル 、Web フロントエンド )
以上がHTMLで横線のhr色を記述する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。