ホームページ > 記事 > ウェブフロントエンド > css3を使用してテキストの単一影効果と複数影効果を実現する方法（完全なコードが添付されています）
css3を使用してテキストの単一影効果と複数影効果を実現する方法（完全なコードが添付されています）
- 坏嘻嘻オリジナル
- 2018-09-28 11:54:084903ブラウズ
近年、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 を使用してテキストの複数の影を実現します
<!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 サイトの他の関連記事を参照してください。