ホームページ >ウェブフロントエンド >CSSチュートリアル >css3を使用してテキストの単一影効果と複数影効果を実現する方法(完全なコードが添付されています)

css3を使用してテキストの単一影効果と複数影効果を実現する方法(完全なコードが添付されています)

坏嘻嘻
坏嘻嘻オリジナル
2018-09-28 11:54:084969ブラウズ

近年、Web ページ開発の過程で、人間とコンピューターのインタラクションやユーザー エクスペリエンスにますます注目が集まっています。色が多様化しているだけでなく、さまざまな特殊効果も目まぐるしく変化しています。今日はテキストで影の特殊効果を実現する方法を主に紹介します。必要な方は参考にしていただければ幸いです。

css3 を使用してテキストのシャドウ効果を実現する原理

シャドウ効果を実現するには、主に text-shadow 属性を使用します。 W3C 標準では、IE で CSS3 シャドウ属性と互換性を持たせるには、ie.css3-htc を使用できます。ただし、標準に従って、Internet Explorer 9 以前のブラウザは現在 text-shadow 属性をサポートしていません。最も基本的な構文は次のとおりです。 text-shadow: h-shadow v-shadow ぼかし色;

##text-shadow 属性設定##水平オフセット。正の値は右に、負の値は左に移動します。

  1. 垂直オフセット。正の値は下向き、負の値は上向きです。

  2. #曖昧さはマイナスにはなりません。

  3. 影の色。

  4. text-shadow プロパティには、テキストの光る効果を実現するという別の機能があります。詳細については、このサイトの他の記事を参照してください:

  5. css3 を使用してフォントの内部グロー効果を実現する方法 (詳細な説明)

    css3 を使用してテキストの単一の影を実装します

<!DOCTYPE html>
<html>
<head>
    <title>单个阴影</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        ul>li:nth-child(odd) {
            text-shadow: 2px 2px 1px red;
        }
    </style>
</head>
<body>
    <ul>
        <li>PHP中文网</li>
        <li>PHP中文网</li>
        <li>PHP中文网</li>
        <li>PHP中文网</li>
    </ul>
</body>
</html>
効果は図に示すとおりです


css3 を使用してテキストの複数の影を実現しますcss3を使用してテキストの単一影効果と複数影効果を実現する方法(完全なコードが添付されています)

<!DOCTYPE html>
<html>
<head>
    <title>多个阴影</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        ul>li:nth-child(odd) {
            text-shadow: 2px 2px 1px red, 10px 2px 1px blue;
        }
    </style>
</head>
<body>
    <ul>
        <li>PHP中文网</li>
        <li>PHP中文网</li>
        <li>PHP中文网</li>
        <li>PHP中文网</li>
        <li>PHP中文网</li>
        <li>PHP中文网</li>
        <li>PHP中文网</li>
        <li>PHP中文网</li>
    </ul>
</body>
</html>
効果は図に示すとおりです

概要: text-shadow 属性は、テキストにシャドウ効果を持たせるだけでなく、複数のシャドウ効果を作成することもできます。カンマで区切って設定すると、通常のフロントエンド開発プロセスで非常に便利です。次の記事では、画像にシャドウ効果を追加する方法と、text-shadow 属性を使用して光るテキスト効果を作成する方法を説明します。 、など、注目してください。

以上がcss3を使用してテキストの単一影効果と複数影効果を実現する方法(完全なコードが添付されています)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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