CSS：盒子阴影

听海边涛声

已于 2024-07-06 14:47:53 修改

阅读量369

点赞数 4

文章标签： css css3 javascript

于 2024-07-06 14:45:47 首次发布

本文链接：https://blog.csdn.net/panghuangang/article/details/140187697

版权

介绍

在CSS3中新增了盒子阴影，可以使用box-shadow属性为盒子添加阴影。

语法：

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

各值的含义如下：

h-shadow：必需。水平阴影的位置，允许为负值。值越大，阴影越往右走；值越小，阴影越往左走。
v-shadow：必需。垂直阴影的位置，允许为负值。值越大，阴影越往下走；值越小，阴影越往上走。
blur：可选。模糊距离。就是表示了阴影的虚实程度。值越大，影子越模糊，越虚；值越小，阴影越实。
spread：可选。阴影的尺寸。指影子的大小。值越大，阴影越大；值越小，阴影越小。
color：可选。阴影的颜色。一般采用rgba(0, 0, 0, .3)这样的格式。
inset：可选。内阴影还是外阴影，默认是外阴影（outset），但不可以写outset这个单词，否则将导致阴影无效。也就是说，如果写上inset，表示使用内阴影；如果不写inset，表示使用外阴影。

盒子阴影不占用空间，不会影响其它盒子排列。

示例

显示盒子的阴影

	<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;
      margin: 100px auto;
      box-shadow: 10px 10px 10px 10px black;
    }
  </style>
</head>

<body>
  <div></div>
</body>

</html>

在这里插入图片描述

增大水平阴影的位置h-shadow，阴影往右走

在这里插入图片描述

减少水平阴影的位置h-shadow，阴影往左走

在这里插入图片描述

增大垂直阴影的位置v-shadow，阴影往下走

在这里插入图片描述

减小垂直阴影的位置v-shadow，阴影往上走

在这里插入图片描述

模糊距离blur越大，影子越模糊，越虚

在这里插入图片描述

模糊距离blur越小，影子越实

在这里插入图片描述

阴影spread尺寸越大，阴影越大

在这里插入图片描述

改变阴影的颜色

在这里插入图片描述

写inset，表示使用内阴影

在这里插入图片描述

原先盒子没有阴影，当鼠标经过盒子就添加阴影效果

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;
      margin: 100px auto;
    }

    /* 原先盒子没有阴影，当鼠标经过盒子就添加阴影效果 */
    div:hover {
      box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, .3);
    }
  </style>
</head>

<body>
  <div></div>
</body>

</html>