CSSのtext-ストロークプロパティを使用してテキストストロークを作成するにはどうすればよいですか? (ソースコード)

云罗郡主
リリース: 2018-10-26 14:33:57
オリジナル
5359 人が閲覧しました

CSS の text-ストローク 属性を使用してページ上のテキストをストロークする方法を知らない人は、実際には、 textshadow 属性を使用してテキストをストロークする方法も非常に簡単です。テキストシャドウサイドを作成するにはCSSのtext-ストローク属性を使用しますか?以下に textshadow プロパティをまとめてみましょう。

1: textshadow 属性:

多くの人は、CSS でテキストストロークを使用してテキストをストロークします。実際には、テキスト行をストロークするのに、テキスト行の境界線。

2: テキスト ストローク構文の使用:

テキスト ストローク: 幅の値、色の値

説明:

In事実 text-ストローク は準拠した構文であり、幅の値と色の値という 2 つのサブプロパティで構成されます。

1. Text-blood-width 属性の説明: 通常、境界線の幅を長さで設定します。

2.境界線の色を設定します

3: text-ストローク属性の使用例:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 text-stroke属性</title>
    <style type="text/css">
        div
        {
            font-size:30px;
            font-weight:bold;
        }
        #div2
        {
             text-stroke:1px red;
             -webkit-text-stroke:1px red;
             -moz-text-stroke:1px red;
             -o-text-stroke:1px red;
        }
    </style>
</head>
<body>
    <div id="div1">我没有被描边</div>
    <div id="div2">我被描边1像素的红色的边</div>
</body>
</html>
ログイン後にコピー

上記のコードの効果は図に示すとおりです:

CSSのtext-ストロークプロパティを使用してテキストストロークを作成するにはどうすればよいですか? (ソースコード)

サンプル アプリケーションではあまり一般的に使用されないと思われる場合は、他の属性と一緒に使用することもできます。たとえば、次のようになります。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 text-stroke属性</title>
    <style type="text/css">
        div
        {
            font-family:Verdana;
            font-size:50px;
            font-weight:bold;
            color:transparent;  /*设置文字颜色为透明*/
            text-stroke:2px red;
            -webkit-text-stroke:2px #45B823;
            -moz-text-stroke:2px #45B823;
        }
    </style>
</head>
<body>
    <div>php中文网</div>
</body>
</html>
ログイン後にコピー

効果は次の図に示すとおりです:

CSSのtext-ストロークプロパティを使用してテキストストロークを作成するにはどうすればよいですか? (ソースコード)

上記は、CSS テキスト ストローク属性を使用してテキスト ストロークを作成する方法の完全な紹介です。 CSS ビデオ チュートリアル について詳しく知りたい場合は、php 中国語 Web サイトに注目してください。


以上がCSSのtext-ストロークプロパティを使用してテキストストロークを作成するにはどうすればよいですか? (ソースコード)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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