What are the shadow attributes implemented in css3-Front-end Q&A-php.cn

What are the shadow attributes implemented in css3

青灯夜游

Release： 2022-02-25 18:20:46

Original

13899 people have browsed it

The shadow attributes implemented in css3 include: 1. text-shadow attribute, which can achieve text shadow effect; 2. box-shadow attribute, which can achieve border shadow effect; 3. filter attribute, which needs to be combined with drop-shadow() Used together with the function, you can set a shadow effect on the image.

What are the shadow attributes implemented in css3

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

css3 implements shadow attribute

1. text-shadow attribute---implements text shadow effect

The text-shadow property is used to set shadowed text; you can set the pixel length, width and blur distance of the shadow, as well as the color of the shadow.

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

What are the shadow attributes implemented in css3

2. box-shadow attribute--achieve border shadow effect

The box-shadow attribute can apply shadow to text Box, you can set the pixel length, width and blur distance of the shadow as well as the color of the shadow.

box-shadow can add shadows to elements, supporting adding one or more.

box-shadow: X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 投影方式;

Copy after login

Parameters:

What are the shadow attributes implemented in css3

Note: inset can be written in the first or last parameter, other positions are invalid.

Shadow blur radius:

This parameter is optional. The value can only be positive. If the value is 0, it means that the shadow has no blur effect. The larger the value, the smaller the edge of the shadow. Vague.

css code:

#box{
     width:50px;
     height:50px;
     background:#fff;
     box-shadow:4px 4px 15px #666;
 }

Copy after login

Effect:

What are the shadow attributes implemented in css3

Shadow expansion radius:

This The parameter is optional, and the value can be positive or negative. If the value is positive, the entire shadow will expand and expand. Otherwise, if the value is negative, it will shrink.

css code:

#box{
     width:50px;
     height:50px;
     background:#fff;
     box-shadow:4px 4px 15px -3px #666;
}

Copy after login

Effect:

What are the shadow attributes implemented in css3

X-axis offset And the Y-axis offset value can be set to a negative number

The X-axis offset is a negative number:

#box{
    width:50px;
    height:50px;
    background:#fff;
    box-shadow:-5px 5px 5px #666;
}

Copy after login

Effect:

What are the shadow attributes implemented in css3

Y-axis offset is negative:

#box{
    width:50px;
    height:50px;
    background:#fff;
    box-shadow:5px -5px 5px #666;
}

Copy after login

Effect:

What are the shadow attributes implemented in css3

##Outer shadow:

#box{
     width:50px;
     height:50px;
     background:green;
     box-shadow:5px 4px 10px #666;
}

Copy after login

Effect:

Inner shadow:

#box{
     width:50px;
     height:50px;
     background:#fff;
     box-shadow:5px 4px 10px #666 inset;
}

Copy after login

Effect:

Add multiple shadows:

#box{
     width:50px;
     height:50px;
     background:#fff;
     box-shadow:5px 4px 10px #666 inset,
                3px 3px 5px pink,
                6px 4px 2px green;
}

Copy after login

Effect:

What are the shadow attributes implemented in css3

3. filter attribute

The filter attribute defines the element (usually What are the shadow attributes implemented in css3

) Visual effect, when used with the drop-shadow() function, can set a shadow effect on the image.

filter:drop-shadow(h-shadow v-shadow blur spread color);

Copy after login

A shadow is an offset version of a mask that is composited underneath the image, can have blur, and can be painted in a specific color. The function accepts values of type (defined in the CSS3 context), except that the "inset" keyword is not allowed. This function is very similar to the existing box-shadow box-shadow property; the difference is that through the filter, some browsers provide hardware acceleration for better performance. The parameters are as follows:

h-shadow v-shadow (required)
These are the two parameters for setting the shadow offset Value. Sets the horizontal distance. Negative values will cause the shadow to appear on the left side of the element. Sets the vertical distance. Negative values will cause the shadow to appear above the element. View possible units for .
If both values are 0, the shadow appears directly behind the element (if and/or < ;spread-radius>, there will be a blur effect).
(optional)
This is the third code> value. The larger the value, the blurrier it is, and the shadow will become larger and lighter. Negative values are not allowed. If not set, the default is 0 (the boundary of the shadow is very sharp).
(optional)
This is the fourth value. Positive values cause the shadow to expand and change. Large, negative values will shrink the shadow. If not set, the default is 0 (the shadow will be the same size as the element).
Note: Webkit, and some other browsers do not support the third Four lengths will not be rendered if added.
(optional)
查看该值可能的关键字和标记。若未设定，颜色值基于浏览器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中，会应用colorcolor属性的值。另外, 如果颜色值省略，WebKit中阴影是透明的。

<!DOCTYPE html>
<html>
<head>
<style>
img {
    -webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari, Opera */
    filter: drop-shadow(8px 8px 10px red);
}
</style>
</head>
<body>

<p>给图像设置一个阴影效果:</p>

<img src="pineapple.jpg" alt="Pineapple" width="300"    style="max-width:90%">

</body>
</html>

Copy after login

What are the shadow attributes implemented in css3

（学习视频分享：css视频教程）

The above is the detailed content of What are the shadow attributes implemented in css3. For more information, please follow other related articles on the PHP Chinese website!