How to achieve shadow effect in css-CSS Tutorial-php.cn

How to achieve shadow effect in css

青灯夜游

Release： 2023-01-05 16:08:19

Original

23545 people have browsed it

Method: 1. Use the text-shadow attribute, the syntax "text-shadow: horizontal shadow vertical shadow blur distance color;"; 2. Use the box-shadow attribute, the syntax "box-shadow: horizontal shadow vertical shadow blur distance shadow size color inset;".

How to achieve shadow effect in css

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

Method 1: Use text-shadow attribute

text-shadow attribute is used to set the text with shadow; the pixel length of the shadow can be set , width and blur distance as well as the color of the shadow.

Syntax:

text-shadow: h-shadow v-shadow blur color;

Copy after login

Property values:

h-shadow: Sets the position of the horizontal shadow, negative values are allowed.
v-shadow: Sets the position of the vertical shadow, allowing negative values.
blur: Set the blur distance.
color: Set the color of the shadow.

Example:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css设置阴影效果</title> 
        <style> 
            h1 { 
                color: red; 
                text-shadow: 3px 5px 5px #656B79; 
            }
        </style> 
    </head> 
    <body> 
        <h1>文本阴影！</h1>
    </body> 
</html>

Copy after login

How to achieve shadow effect in css

##Method 2: Use box-shadow attribute

box-shadowThe property can apply shadow to the text box, and can set the pixel length, width and blur distance of the shadow as well as the color of the shadow.

Syntax:

box-shadow: h-shadow v-shadow blur spread color inset;

Copy after login

Attribute value:

h-shadow: Sets the position of the horizontal shadow, negative values are allowed; required value, Cannot be omitted.
v-shadow: Set the position of the vertical shadow, negative values are allowed; required value, cannot be omitted.
blur: Set the blur distance; optional value, can be omitted.
spread: Set the size of the shadow; optional value, can be omitted.
color: Set the color of the shadow; optional value, can be omitted.
inset: Sets the inner shadow to change the shadow from the outer shadow (at the beginning); optional value, can be omitted.

Example:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css设置阴影效果</title>
        <style>
            .demo{
                width: 400px;
                height: 300px;
                margin: 50px auto;
            }
            .demo img{
                 box-shadow: 10px 10px 10px rgba(0,0,0,.5);
                 /*考虑浏览器兼容性*/
                 -moz-box-shadow: 10px 10px 10px rgba(0,0,0,.5);
                 -webkit-box-shadow: 10px 10px 10px rgba(0,0,0,.5);
            }
        </style>
    </head>
    <body>
        <div class="demo">
            <img  src="img/1.jpg"/ alt="How to achieve shadow effect in css" >
        </div>
    </body>
</html>

Copy after login

How to achieve shadow effect in css

(Learning video sharing:

css video tutorial)

The above is the detailed content of How to achieve shadow effect in css. For more information, please follow other related articles on the PHP Chinese website!