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

Home

Web Front-end

CSS Tutorial

How to achieve shadow effect in css

青灯夜游

Apr 13, 2021 pm 06:37 PM

cssshadow effect

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;

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 id="文本阴影">文本阴影！</h1>
    </body> 
</html>

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;

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="/static/imghwm/default1.png"  data-src="img/1.jpg"  class="lazy"  / alt="How to achieve shadow effect in css" >
        </div>
    </body>
</html>

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!

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