Home >Web Front-end >Front-end Q&A >What are the shadow attributes implemented in css3
What are the shadow attributes implemented in css3
- 青灯夜游Original
- 2021-12-16 15:24:2213893browse
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.
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>
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轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 投影方式;
Parameters:
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;
}Effect:
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;
}Effect:
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;
}Effect:
Y-axis offset is negative:
#box{
width:50px;
height:50px;
background:#fff;
box-shadow:5px -5px 5px #666;
}Effect:
#box{
width:50px;
height:50px;
background:green;
box-shadow:5px 4px 10px #666;
}Effect:
#box{
width:50px;
height:50px;
background:#fff;
box-shadow:5px 4px 10px #666 inset;
} Effect:
#box{
width:50px;
height:50px;
background:#fff;
box-shadow:5px 4px 10px #666 inset,
3px 3px 5px pink,
6px 4px 2px green;
} Effect:
3. filter attribute
The filter attribute defines the element (usuallyfilter:drop-shadow(h-shadow v-shadow blur spread color);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
- 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>
（学习视频分享：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!