css3を使用してテキストの単一影効果と複数影効果を実現する方法（完全なコードが添付されています）-CSSチュートリアル-php.cn

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

坏嘻嘻

リリース： 2018-09-28 11:54:08

オリジナル

4957 人が閲覧しました

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

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

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

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

垂直オフセット。正の値は下向き、負の値は上向きです。
#曖昧さはマイナスにはなりません。
影の色。
text-shadow プロパティには、テキストの光る効果を実現するという別の機能があります。詳細については、このサイトの他の記事を参照してください:
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 サイトの他の関連記事を参照してください。