ホームページ > ウェブフロントエンド > フロントエンドQ&A > CSSのtext-decoration-style属性の使い方

CSSのtext-decoration-style属性の使い方

藏色散人
リリース: 2019-05-30 09:52:03
オリジナル
4112 人が閲覧しました

css text-decoration-style 属性は、線の表示方法を指定するために使用されます。その構文は、text-decoration-style: Solid|double|dotted|dashed|wavy|initial|inherit です。

CSSのtext-decoration-style属性の使い方

#css text-decoration-style 属性を使用するにはどうすればよいですか?

定義と使用法

text-decoration-style プロパティは、線の表示方法を指定します。

デフォルト: ソリッド

継承: いいえ

アニメーション化可能: いいえ。

バージョン: CSS3

JavaScript 構文:

object.style.textDecorationStyle="wavy"
ログイン後にコピー

CSS 構文

text-decoration-style: solid|double|dotted|dashed|wavy|initial|inherit;
ログイン後にコピー

プロパティ値

##● 実線 デフォルト値。線は 1 本の線として表示されます。

# 二重線は二重線として表示されます。

# 点線は点線で表示されます。

# 破線は点線として表示されます。

# 波線は波線として表示されます。

#Initial は、このプロパティをデフォルト値に設定します。

# 継承 この属性を親要素から継承します。

#例

段落の下に波線を表示します:

<!DOCTYPE html>
<html>
<head>
<style>
p
{
text-decoration: underline; 
text-decoration-style: wavy; 
-moz-text-decoration-style: wavy; /* 针对 Firefox 的代码 */
}
</style>
</head>
<body>
<p>
本实例中的段落文本下方会显示一条波浪线。</p>
<p><b>注意:</b>只有 Chrome 支持 text-decoration-style 属性。</p>
<p><b>注意:</b>Firefox 支持另一个可替代该属性的属性,即 -moz-text-decoration-style 属性。</p>
</body>
</html>
ログイン後にコピー

効果の出力:

Browser のサポート: ほとんどすべての主要なブラウザは text-decoration-style 属性をサポートしていません。 Firefox は、代替プロパティである -moz-text-decoration-style プロパティをサポートしています。 CSSのtext-decoration-style属性の使い方

以上がCSSのtext-decoration-style属性の使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート