css如何实现给元素块加阴影的效果

发布时间：2022-09-19 09:55:30 作者：iii
来源：亿速云阅读：294

CSS如何实现给元素块加阴影的效果

在网页设计中，阴影效果是一种常见的视觉元素，它能够为页面增添层次感和立体感，使元素在视觉上更加突出。CSS（层叠样式表）提供了多种方式来实现阴影效果，本文将详细介绍如何使用CSS为元素块添加阴影效果。

1. 使用`box-shadow`属性

box-shadow是CSS中最常用的属性之一，用于为元素添加阴影效果。它可以控制阴影的颜色、模糊程度、偏移量以及扩展范围。

1.1 基本语法

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

h-offset：水平偏移量，正值表示阴影向右偏移，负值表示向左偏移。
v-offset：垂直偏移量，正值表示阴影向下偏移，负值表示向上偏移。
blur：模糊半径，值越大，阴影越模糊。
spread：阴影的扩展范围，正值会使阴影扩大，负值会使阴影缩小。
color：阴影的颜色，可以使用任何有效的CSS颜色值。
inset：可选参数，如果指定，阴影将出现在元素内部。

1.2 示例

div {
    width: 200px;
    height: 200px;
    background-color: #f0f0f0;
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}

在这个例子中，div元素将有一个向右下方偏移10px、模糊半径为5px、颜色为半透明黑色的阴影。

1.3 多重阴影

box-shadow属性支持多重阴影，只需用逗号分隔多个阴影值即可。

div {
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75),
                -10px -10px 5px 0px rgba(255,0,0,0.75);
}

这个例子中，div元素将同时拥有一个向右下方的黑色阴影和一个向左上方的红色阴影。

2. 使用`text-shadow`属性

text-shadow属性用于为文本添加阴影效果，其语法与box-shadow类似。

2.1 基本语法

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

h-offset：水平偏移量。
v-offset：垂直偏移量。
blur：模糊半径。
color：阴影颜色。

2.2 示例

h1 {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

这个例子中，h1标题将有一个向右下方偏移2px、模糊半径为4px、颜色为半透明黑色的阴影。

2.3 多重阴影

与box-shadow类似，text-shadow也支持多重阴影。

h1 {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5),
                -2px -2px 4px rgba(255,0,0,0.5);
}

这个例子中，h1标题将同时拥有一个向右下方的黑色阴影和一个向左上方的红色阴影。

3. 使用`filter`属性

filter属性是CSS3中引入的一个强大工具，它可以对元素应用各种图形效果，包括阴影。

3.1 基本语法

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

h-offset：水平偏移量。
v-offset：垂直偏移量。
blur：模糊半径。
color：阴影颜色。

3.2 示例

img {
    filter: drop-shadow(10px 10px 5px rgba(0,0,0,0.75));
}

这个例子中，img元素将有一个向右下方偏移10px、模糊半径为5px、颜色为半透明黑色的阴影。

3.3 多重阴影

filter属性不支持直接的多重阴影，但可以通过嵌套元素或伪元素来实现类似效果。

div {
    position: relative;
}

div::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: drop-shadow(10px 10px 5px rgba(0,0,0,0.75));
}

div::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: drop-shadow(-10px -10px 5px rgba(255,0,0,0.75));
}

这个例子中，div元素将同时拥有一个向右下方的黑色阴影和一个向左上方的红色阴影。

4. 使用`clip-path`和`box-shadow`结合

clip-path属性可以裁剪元素的显示区域，结合box-shadow属性，可以实现更加复杂的阴影效果。

4.1 基本语法

clip-path: polygon(x1 y1, x2 y2, x3 y3, ...);

x1 y1, x2 y2, x3 y3, …：定义多边形的顶点坐标。

4.2 示例

div {
    width: 200px;
    height: 200px;
    background-color: #f0f0f0;
    clip-path: polygon(0 0, 100% 0, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0 75%);
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}

这个例子中，div元素被裁剪为一个复杂的多边形，并且有一个向右下方偏移10px、模糊半径为5px、颜色为半透明黑色的阴影。

5. 使用`mask`和`box-shadow`结合

mask属性可以定义元素的遮罩效果，结合box-shadow属性，可以实现更加丰富的阴影效果。

5.1 基本语法

mask: url(mask-image) | none | linear-gradient() | radial-gradient() | ...;

mask-image：定义遮罩图像，可以是图片、渐变或其他图形。

5.2 示例

div {
    width: 200px;
    height: 200px;
    background-color: #f0f0f0;
    mask: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}

这个例子中，div元素被应用了一个从上到下的线性渐变遮罩，并且有一个向右下方偏移10px、模糊半径为5px、颜色为半透明黑色的阴影。

6. 使用`transform`和`box-shadow`结合

transform属性可以对元素进行旋转、缩放、倾斜等变换，结合box-shadow属性，可以实现更加动态的阴影效果。

6.1 基本语法

transform: rotate(angle) | scale(x, y) | skew(x-angle, y-angle) | translate(x, y) | ...;

rotate(angle)：旋转元素。
scale(x, y)：缩放元素。
skew(x-angle, y-angle)：倾斜元素。
translate(x, y)：平移元素。

6.2 示例

div {
    width: 200px;
    height: 200px;
    background-color: #f0f0f0;
    transform: rotate(45deg);
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}

这个例子中，div元素被旋转了45度，并且有一个向右下方偏移10px、模糊半径为5px、颜色为半透明黑色的阴影。

7. 使用`perspective`和`box-shadow`结合

perspective属性可以为元素创建3D空间，结合box-shadow属性，可以实现更加立体的阴影效果。

7.1 基本语法

perspective: length;

length：定义观察者与z=0平面的距离。

7.2 示例

div {
    width: 200px;
    height: 200px;
    background-color: #f0f0f0;
    perspective: 500px;
    transform: rotateY(45deg);
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}

这个例子中，div元素被应用了一个500px的透视效果，并且绕Y轴旋转了45度，同时有一个向右下方偏移10px、模糊半径为5px、颜色为半透明黑色的阴影。

8. 使用`backdrop-filter`和`box-shadow`结合

backdrop-filter属性可以为元素的背景应用滤镜效果，结合box-shadow属性，可以实现更加柔和的阴影效果。

8.1 基本语法

backdrop-filter: blur(radius) | brightness(percent) | contrast(percent) | ...;

blur(radius)：模糊背景。
brightness(percent)：调整背景亮度。
contrast(percent)：调整背景对比度。

8.2 示例

div {
    width: 200px;
    height: 200px;
    background-color: rgba(240, 240, 240, 0.5);
    backdrop-filter: blur(10px);
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}

这个例子中，div元素的背景被模糊了10px，并且有一个向右下方偏移10px、模糊半径为5px、颜色为半透明黑色的阴影。

9. 使用`mix-blend-mode`和`box-shadow`结合

mix-blend-mode属性可以控制元素与其背景的混合模式，结合box-shadow属性，可以实现更加独特的阴影效果。

9.1 基本语法

mix-blend-mode: normal | multiply | screen | overlay | ...;

normal：默认混合模式。
multiply：正片叠底。
screen：滤色。
overlay：叠加。

9.2 示例

div {
    width: 200px;
    height: 200px;
    background-color: #f0f0f0;
    mix-blend-mode: multiply;
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}

这个例子中，div元素与其背景的混合模式为正片叠底，并且有一个向右下方偏移10px、模糊半径为5px、颜色为半透明黑色的阴影。

10. 使用`clip-path`和`filter`结合

clip-path和filter属性可以结合使用，以实现更加复杂的阴影效果。

10.1 基本语法

clip-path: polygon(x1 y1, x2 y2, x3 y3, ...);
filter: drop-shadow(h-offset v-offset blur color);

10.2 示例

div {
    width: 200px;
    height: 200px;
    background-color: #f0f0f0;
    clip-path: polygon(0 0, 100% 0, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0 75%);
    filter: drop-shadow(10px 10px 5px rgba(0,0,0,0.75));
}

这个例子中，div元素被裁剪为一个复杂的多边形，并且有一个向右下方偏移10px、模糊半径为5px、颜色为半透明黑色的阴影。

11. 使用`mask`和`filter`结合

mask和filter属性可以结合使用，以实现更加丰富的阴影效果。

11.1 基本语法

mask: url(mask-image) | none | linear-gradient() | radial-gradient() | ...;
filter: drop-shadow(h-offset v-offset blur color);

11.2 示例

div {
    width: 200px;
    height: 200px;
    background-color: #f0f0f0;
    mask: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
    filter: drop-shadow(10px 10px 5px rgba(0,0,0,0.75));
}

这个例子中，div元素被应用了一个从上到下的线性渐变遮罩，并且有一个向右下方偏移10px、模糊半径为5px、颜色为半透明黑色的阴影。

12. 使用`transform`和`filter`结合

transform和filter属性可以结合使用，以实现更加动态的阴影效果。

12.1 基本语法

transform: rotate(angle) | scale(x, y) | skew(x-angle, y-angle) | translate(x, y) | ...;
filter: drop-shadow(h-offset v-offset blur color);

12.2 示例

div {
    width: 200px;
    height: 200px;
    background-color: #f0f0f0;
    transform: rotate(45deg);
    filter: drop-shadow(10px 10px 5px rgba(0,0,0,0.75));
}

这个例子中，div元素被旋转了45度，并且有一个向右下方偏移10px、模糊半径为5px、颜色为半透明黑色的阴影。

13. 使用`perspective`和`filter`结合

perspective和filter属性可以结合使用，以实现更加立体的阴影效果。

13.1 基本语法

perspective: length;
filter: drop-shadow(h-offset v-offset blur color);

13.2 示例

div {
    width: 200px;
    height: 200px;
    background-color: #f0f0f0;
    perspective: 500px;
    transform: rotateY(45deg);
    filter: drop-shadow(10px 10px 5px rgba(0,0,0,0.75));
}

这个例子中，div元素被应用了一个500px的透视效果，并且绕Y轴旋转了45度，同时有一个向右下方偏移10px、模糊半径为5px、颜色为半透明黑色的阴影。

14. 使用`backdrop-filter`和`filter`结合

backdrop-filter和filter属性可以结合使用，以实现更加柔和的阴影效果。

14.1 基本语法

backdrop-filter: blur(radius) | brightness(percent) | contrast(percent) | ...;
filter: drop-shadow(h-offset v-offset blur color);

14.2 示例

div {
    width: 200px;
    height: 200px;
    background-color: rgba(240, 240, 240, 0.5);
    backdrop-filter: blur(10px);
    filter: drop-shadow(10px 10px 5px rgba(0,0,0,0.75));
}

这个例子中，div元素的背景被模糊了10px，并且有一个向右下方偏移10px、模糊半径为5px、颜色为半透明黑色的阴影。

15. 使用`mix-blend-mode`和`filter`结合

mix-blend-mode和filter属性可以结合使用，以实现更加独特的阴影效果。

15.1 基本语法

mix-blend-mode: normal | multiply | screen | overlay | ...;
filter: drop-shadow(h-offset v-offset blur color);

15.2 示例

div {
    width: 200px;
    height: 200px;
    background-color: #f0f0f0;
    mix-blend-mode: multiply;
    filter: drop-shadow(10px 10px 5px rgba(0,0,0,0.75));
}

这个例子中，div元素与其背景的混合模式为正片叠底，并且有一个向右下方偏移10px、模糊半径为5px、颜色为半透明黑色的阴影。

16. 使用`clip-path`和`backdrop-filter`结合

clip-path和backdrop-filter属性可以结合使用，以实现更加复杂的阴影效果。

16.1 基本语法

clip-path: polygon(x1 y1, x2 y2, x3 y3, ...);
backdrop-filter: blur(radius) | brightness(percent) | contrast(percent) | ...;

16.2 示例

div {
    width: 200px;
    height: 200px;
    background-color: rgba(240, 240, 240, 0.5);
    clip-path: polygon(0 0, 100% 0, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0 75%);
    backdrop-filter: blur(10px);
}

这个例子中，div元素被裁剪为一个复杂的多边形，并且背景被模糊了10px。

17. 使用`mask`和`backdrop-filter`结合

mask和backdrop-filter属性可以结合使用，以实现更加丰富的阴影效果。

17.1 基本语法

mask: url(mask-image) | none | linear-gradient() | radial-gradient() | ...;
backdrop-filter: blur(radius) | brightness(percent) | contrast(percent) | ...;

17.2 示例

”`css div { width: 200px; height: 200px; background-color: rgba(240, 240, 240, 0.5); mask: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,