ホームページ > 記事 > ウェブフロントエンド > CSS 属性を使用してフォントの影効果を実現するにはどうすればよいですか? (コードデモ)
CSS 属性を使用してフォントの影効果を実現するにはどうすればよいですか? (コードデモ)
- 藏色散人オリジナル
- 2018-08-10 16:27:035506ブラウズ
この記事では、美しいCSSフォントスタイルの効果を紹介します。困っている友達の助けになれば幸いです。
CSSフォントの影効果1の具体的なコード例は以下の通りです:
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>css字体阴影测试一</title>
<meta charset="UTF-8">
<style type="text/css">
h3.a {text-shadow: 0.1em 0.1em 0.05em #333
}
h3.b {text-shadow: 0.1em 0.1em 0.2em black}
</style>
</head>
<body>
<h3 class="a">css好看的字体样式之阴影效果</h3>
<h3 class="b">css好看的字体样式之阴影效果</h3>
</body>
</html>上記のコードの効果は以下のとおりです:
CSSフォントの影効果2の具体的なコード例は以下のとおりです:
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>css字体阴影测试一</title>
<meta charset="UTF-8">
<style type="text/css">
h3{color: #1b5c16;}
h3.a {text-shadow: -1px -1px white, 1px 1px #333}
h3.b {text-shadow: 1px 1px white, -1px -1px #444}
</style>
</head>
<body>
<h3 class="a">css好看的字体样式之阴影效果</h3>
<h3 class="b">css好看的字体样式之阴影效果</h3>
</body>
</html>上記のコードの効果は次のとおりです:
注: すべての主要なブラウザは text-shadow 属性をサポートしています。 Internet Explorer 9 以前のブラウザは text-shadow 属性をサポートしていません。
text-shadow プロパティは、テキストに 1 つ以上の影を追加します。このプロパティは、シェードのカンマ区切りリストであり、各シェードは 2 つまたは 3 つの長さの値とオプションの色の値で指定されます。省略された長さは 0 です。
そのプロパティの可能な値:
v-shadow 必須。垂直影の位置。負の値も許可されます。
ぼかし オプション。曖昧な距離。
色はオプションです。影の色。
以上がCSS 属性を使用してフォントの影効果を実現するにはどうすればよいですか? (コードデモ)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。