ホームページ  >  記事  >  ウェブフロントエンド  >  HTMLに下線を設定する方法

HTMLに下線を設定する方法

藏色散人
藏色散人オリジナル
2021-06-03 10:17:0161476ブラウズ

html下線の設定方法: 1. "text-decoration" 属性を使用してテキストに下線を追加します; 2. "border-bottom" を使用してボックスの下線を設定します; 3. "linear-gradient()" を使用して下線をシミュレートします。

HTMLに下線を設定する方法

#この記事の動作環境: Windows 7 システム、HTML5 バージョン、Dell G3 コンピューター。

css での下線のいくつかの実装スキーム

テキストまたは特定のレイアウト ボックスのスタイルを記述するとき、見た目を良くしたり、より目立つようにするために、下線を引いて、ここにいくつかの実装オプションを記録します。

#テキストの下線

テキストに下線を追加するのは実際には比較的簡単です

text-decoration 属性

この属性を使用すると、下線などの特定の効果を設定します。子孫要素に独自の装飾がない場合、祖先要素に設定された装飾は子孫要素にも「拡張」されます。ユーザー エージェントはまばたきをサポートする必要はありません。

簡単に言うと、この属性は取り消し線や下線などのテキストの装飾効果を設定できます。

最も一般的に使用される方法は、a タグのデフォルトの下線スタイルを削除することです。

例:

<html>
<head>
    <style type="text/css">
        h1 {
            text-decoration: overline
        }
        h2 {
            text-decoration: line-through
        }
        h3 {
            text-decoration: underline
        }
        h4 {
            text-decoration: blink
        }
        a {
            text-decoration: none
        }
    </style>
</head>
<body>
    <h1>这是标题 1</h1>
    <h2>这是标题 2</h2>
    <h3>这是标题 3</h3>
    <h4>这是标题 4</h4>
    <p>
        <a href="http://www.w3school.com.cn/index.html">这是一个链接</a>
    </p>
</body>
</html>

HTMLに下線を設定する方法例 1

(テキスト変更の色は color で設定できます)

BoxUnderline

border-bottom

border-bottom 省略形プロパティは、宣言内のすべての下枠プロパティを設定します。

設定できるプロパティは、(順番に) border-bottom-width、border-bottom-style、border-bottom-color です。

border-bottomボックスの境界線は、下線をシミュレートする役割を果たすことができます。

例:

border-bottom: 1px solid #dbdbdb;  
border-top:0px;  
border-left:0px;  
border-right:0px;

HTMLに下線を設定する方法例 2

linear-gradient ()

linear-gradient() 関数は、線形グラデーションの「イメージ」を作成するために使用されます。

線形グラデーションを作成するには、グラデーション効果の開始点と方向 (角度として指定) を設定する必要があります。終了色も定義する必要があります。ストップ カラーは、Gecko に実行させるスムーズなトランジションであり、少なくとも 2 つを指定する必要があります。ただし、より複雑なグラデーション効果を作成するには、より多くの色を指定できます。

この CSS 関数はあまり一般的ではありません。その機能は画像を作成することです。

グラデーション関数を使用して下線をシミュレートする

実際には、背景画像を設定し、幅と高さを設定して下線のように見せます。

例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.test::after {
content: "";
display: block;
    background: linear-gradient(to right, #188eee, #999);
    width: 100%;
    height: 1px;
}
</style>
</head>
<body>
<div class=&#39;test&#39;>
<p class=&#39;box&#39;>内容</p>
</div>
</body>
</html>

HTMLに下線を設定する方法例 3

この方法で作成された下線は最もカスタマイズ可能です。

素敵な下線を引いたり、アニメーションを定義したりすることもできます~

[推奨学習:

html ビデオ チュートリアル

]

以上がHTMLに下線を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。