CSS 添加阴影（附代码案列讲解）

易点互联

于 2024-06-21 11:27:52 发布

阅读量446

点赞数 6

文章标签： css css3 前端

本文链接：https://blog.csdn.net/libol/article/details/139856250

版权

CSS 阴影为网页元素添加了一种视觉效果，它可以增强页面的美感和层次感。通过简单的属性，我们可以为元素添加各种阴影效果，让设计更加生动。

CSS 阴影的基本概念

CSS 提供了两种主要类型的阴影：box-shadow 用于添加阴影效果到元素的边框，而 text-shadow 用于为文本内容添加阴影。

box-shadow 属性

box-shadow 属性可以创建一个或多个阴影，其基本语法如下：

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

h-offset：阴影的水平偏移距离。
v-offset：阴影的垂直偏移距离。
blur：阴影的模糊半径。
spread：阴影的扩散大小。
color：阴影的颜色。
inset：可选，如果使用，表示内部阴影。

text-shadow 属性

text-shadow 的语法与 box-shadow 类似，但只适用于文本：

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

示例代码与效果展示

以下是一个使用 box-shadow 的示例代码：

.box {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  box-shadow: 10px 10px 5px 1px rgba(0, 0, 0, 0.3);
}

这段代码将为一个蓝色的方框添加一个向右下方偏移10像素、模糊半径为5像素、扩散大小为1像素的阴影，阴影颜色为半透明的黑色。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Shadow Example</title>
<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    margin: 50px;
    box-shadow: 10px 10px 5px 1px rgba(0, 0, 0, 0.3);
  }
</style>
</head>
<body>

<div class="box"></div>

</body>
</html>

在上述 HTML 结构中，.box 类的 div 元素将展示添加了阴影的效果。你可以在任何现代浏览器中打开此 HTML 文件，查看阴影效果。

CSS 阴影是一个强大的工具，可以用来增强网页的视觉吸引力。通过 box-shadow 和 text-shadow 属性，我们可以轻松地为元素和文本添加各种阴影效果。掌握这些属性的用法，可以帮助你在网页设计中创造出更加丰富和立体的效果。

YDUIbuilder：一触即发的CSS阴影效果，代码下载尽在掌控

开源免费下载：yduibuilder: 快速开发UI界面，原型设计即前端开发

YDUIbuilder，让前端设计变得轻松而直观。通过我们创新的低代码平台，您可以快速设置CSS阴影，为您的网页元素增添深度和立体感。只需简单的拖放和样式配置，即可实现 box-shadow 和 text-shadow 的高级效果。而且，完成设计后，YDUIbuilder 允许您一键下载所有生成的代码，确保您对项目的每个细节都有完全的控制权和所有权。无论是快速原型设计还是精细的产品开发，YDUIbuilder 都是您提升开发效率的得力助手。