菜鸟教程
教程 css tutorial

阴影与滤镜

CSS 中的阴影（box-shadow 和 text-shadow）与滤镜（filter）功能，可以增强网页的视觉表现，使元素更具层次感和动效美感。

1. 元素阴影（box-shadow）

为盒子添加阴影，支持模糊度、扩展、颜色等参数：

css 
box-shadow: offset-x offset-y blur-radius spread-radius color;

示例：

css 
.card {
  box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.2);
}

多重阴影

css 
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2), -2px -2px 6px rgba(0, 0, 0, 0.1);

2. 文字阴影（text-shadow）

为文本添加阴影效果：

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

3. 滤镜效果（filter）

为元素应用图像级别的特效处理，常见类型：

css 
filter: blur(5px); /* 模糊 */
filter: brightness(1.2); /* 亮度调整 */
filter: contrast(1.5); /* 对比度 */
filter: grayscale(100%); /* 灰度 */
filter: sepia(100%); /* 褐色调 */

也可以组合多个滤镜：

css 
filter: brightness(1.2) blur(2px);

阴影与滤镜示例

在线代码演示
源码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
<meta charset="UTF-8" />
<title>阴影与滤镜示例</title>
<style>
body {
background-color: #fafafa;
font-family: sans-serif;
padding: 40px;
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
}


.card {
  width: 300px;
  padding: 20px;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.2);
  text-align: center;
}

.text-shadow {
  font-size: 28px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  color: #1976d2;
}

.image-filter img {
  width: 300px;
  border-radius: 8px;
  filter: grayscale(80%) brightness(1.2);
}



</style>
</head>


<body>
<div class="card">
<p class="text-shadow">有文字阴影的标题</p>
<p>这张卡片带有阴影</p>
</div>


<div class="image-filter">
<img src="https://picsum.photos/300/200&quot; alt="示例图片" />
</div>
</body>


</html>

相关内容