CSS method to implement text shadow (code example)-CSS Tutorial-php.cn

CSS method to implement text shadow (code example)

不言

Release： 2018-11-12 09:59:15

Original

3115 people have browsed it

CSS can achieve many effects, so this article will introduce to you the code for using CSS to display text shadow. The attribute we use to implement text shadow in CSS is the text-shadow attribute. Let’s take a look at the details below. content.

Syntax format:

text-shadow: (distance in x direction) (distance in y direction) (blur size) (shadow color);

You can also use Commas separate multiple shadows: (Related recommendations: CSS3 Online Manual)

Text shadow: (Shadow 1 x-direction distance) (Shadow 1 y-direction distance) (Shadow 1 blur size ) (Shadow 1 color), (Shadow 2 x direction distance) (Shadow 2 y direction distance) (Shadow 2 blur) (Shadow 2 color),..., (Shadow nx direction distance) (Shadow ny direction distance) (Shadow n blur size) (color of shadow n);

Example:

 text-shadow: 2px 2px 1px #808080;

Copy after login

  text-shadow: 4px 6px 2px blue;

Copy after login

 text-shadow: 3px 3px 1px gray, 8px -6px 2px #30E0C0;

Copy after login

Code example:

Example 1:

Create the following CSS , HTML file.

TextShadow.css

p.ShadowText{    
text-shadow: 5px 5px 2px #808080;
}

Copy after login

TextShadow.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="TextShadow.css" />
    <title></title>
    </head>
    <body>
    <p class="ShadowText">文字阴影效果</p>
    </body>
    </html>

Copy after login

Display results

When the web browser displays the above HTML file, it will be displayed as shown below Effect.

CSS method to implement text shadow (code example)

Example 2:

Create the following CSS, HTML files.

TextShadow.css

p.ShadowText2 {
    font-size:18px;    
    font-weight:700;    
    text-shadow: 2px 2px 1px #E0E0E0;
}

Copy after login

TextShadow.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="TextShadow.css" />
    <title></title>
    </head>
    <body>
    <p class="ShadowText2">文字阴影效果</p>
    </body>
    </html>

Copy after login

Display results

When the web browser displays the above HTML file, it will be displayed as shown below Effect

CSS method to implement text shadow (code example)

Example 3: When displaying multiple shadows

Create the following CSS, HTML files.

TextShadow.css

p.ShadowText3 {
    font-size: 24px;    
    font-weight: 700;    
    text-shadow: 8px 8px 1px #A0A0A0, 24px 24px 6px #A0A0F0;
}

Copy after login

TextShadow.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="TextShadow.css" />
    <title></title>
    </head>
    <body>
    <p class="ShadowText3">文字阴影效果</p>
    </body>
    </html>

Copy after login

Display results

When the web browser displays the above HTML file, it will be displayed as shown below Effect

CSS method to implement text shadow (code example)

Example 4: More shadows

Create the following CSS, HTML files.

TextShadow.css

p.ShadowText4 {
    font-size: 24px;    
    font-weight: 700;    
    text-shadow: 8px 8px 1px #A0A0A0, 24px 24px 6px #A0A0F0, 36px 36px 2px #ff6a00, 48px 24px 2px #99ff70;
}

Copy after login

TextShadow.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="TextShadow.css" />
    <title></title></head><body>
    <p class="ShadowText4">文字阴影效果</p>
    </body>
    </html>

Copy after login

Display results

When the web browser displays the above HTML file, it will be displayed as shown below Effect.

CSS method to implement text shadow (code example)

The above is the entire content of this article. For more exciting content about CSS, you can pay attention to the CSS3 Video Tutorial column on the php Chinese website! ! !

The above is the detailed content of CSS method to implement text shadow (code example). For more information, please follow other related articles on the PHP Chinese website!