CSS 属性を使用してフォントの影効果を実現するにはどうすればよいですか? (コードデモ)-CSSチュートリアル-php.cn

CSS 属性を使用してフォントの影効果を実現するにはどうすればよいですか? (コードデモ)

藏色散人

リリース： 2018-08-10 16:27:03

オリジナル

5552 人が閲覧しました

この記事では、美しい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 属性を使用してフォントの影効果を実現するにはどうすればよいですか? (コードデモ)

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>

ログイン後にコピー

上記のコードの効果は次のとおりです:

CSS 属性を使用してフォントの影効果を実現するにはどうすればよいですか? (コードデモ)