CSS|盒子阴影

最新推荐文章于 2024-06-17 03:14:49 发布

Alan_Lowe

最新推荐文章于 2024-06-17 03:14:49 发布

阅读量2.4k

点赞数 2

分类专栏： # CSS 文章标签： css css3 html 盒子阴影

本文链接：https://blog.csdn.net/qq_45985728/article/details/119297527

版权

CSS 专栏收录该内容

30 篇文章 1 订阅

订阅专栏

CSS|盒子阴影

使用box-shadow可以设置盒子的阴影，它有六个参数，其中前两个是必选的

box-shadow: 阴影的水平位置阴影的垂直位置模糊距离阴影的尺寸阴影的颜色外部或内部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子阴影</title>
  <style>
    div{
      width: 300px;
      height: 300px;
      margin-left: 20px;
      margin-top: 20px;
      border: 10px solid yellow;
      background-image: url("../resource/image/img.png");
      background-size: cover;
      /*box-shadow:水平位置，垂直位置，模糊距离，阴影尺寸，阴影颜色，inset*/
      box-shadow: 20px 20px 100px 10px yellow;
    }
  </style>
</head>
<body>

<div></div>

</body>
</html>

在这里插入图片描述

这样子写5个参数，会默认是外部阴影，如果添加上inset参数，那么会变为内部阴影：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子阴影</title>
  <style>
    div{
      width: 300px;
      height: 300px;
      margin-left: 20px;
      margin-top: 20px;
      border: 10px solid yellow;
      background-image: url("../resource/image/img.png");
      background-size: cover;
      /*box-shadow:水平位置，垂直位置，模糊距离，阴影尺寸，阴影颜色，inset*/
      box-shadow: 20px 20px 100px 10px yellow inset;
    }
  </style>
</head>
<body>

<div></div>

</body>
</html>

在这里插入图片描述

人生没有白走的路，每一步都算数！

Alan_Lowe

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS|盒子阴影

CSS|盒子阴影使用box-shadow可以设置盒子的阴影，它有六个参数，其中前两个是必选的box-shadow: 阴影的水平位置阴影的垂直位置模糊距离阴影的尺寸阴影的颜色外部或内部<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>盒子阴影</title> <style> div{
复制链接

扫一扫