Home >Web Front-end >CSS Tutorial >CSS method to implement text shadow (code example)

CSS method to implement text shadow (code example)

不言Original: 2018-11-12 09:59:153109browse

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;

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

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

Code example:

Example 1:

Create the following CSS , HTML file.

TextShadow.css

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

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>

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;
}

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>

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;
}

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>

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;
}

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to implement chat bubble effect in CSS3? (code example)Next article：How to implement chat bubble effect in CSS3? (code example)

See more

CSS method to implement text shadow (code example)

Related articles