How to achieve font shadow effect using css attributes? (code demo)-CSS Tutorial-php.cn

How to achieve font shadow effect using css attributes? (code demo)

藏色散人

Release： 2018-08-10 16:27:03

Original

5496 people have browsed it

This article will introduce to you the effects of beautiful CSS font styles. Hope it helps friends in need.

The specific code example of css font shadow effect is as follows:

<!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>

Copy after login

The effect of the above code is as follows:

How to achieve font shadow effect using css attributes? (code demo)

Css font shadow effect 2 specific code examples are as follows:

<!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>

Copy after login

The effect of the above code is as shown below:

How to achieve font shadow effect using css attributes? (code demo)

Note: All major browsers Both support the text-shadow attribute. Internet Explorer 9 and earlier browsers do not support the text-shadow attribute.

The text-shadow property adds one or more shadows to text. This property is a comma-separated list of shades, each shade specified with two or three length values and an optional color value. The omitted length is 0.

Possible values for its properties:

h-shadow Required. The position of the horizontal shadow. Negative values are allowed.

v-shadow Required. The position of the vertical shadow. Negative values are allowed.

blur Optional. Blurred distance.

color Optional. The color of the shadow.

The above is the detailed content of How to achieve font shadow effect using css attributes? (code demo). For more information, please follow other related articles on the PHP Chinese website!