前端学习-盒子阴影（box-shadow）

吉米的编程日记

于 2024-03-12 21:35:36 发布

阅读量446

点赞数 10

文章标签：前端学习 html

本文链接：https://blog.csdn.net/m0_62211222/article/details/136663752

版权

先上代码（直接复制到你的编译器即可运行）

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>盒子阴影</title>
    <style>
        div{
            background-color:red;
            width:200px;
            height:100px;
            text-align:center;
            line-height:100px;
        }

        div:hover{
            box-shadow:10px 10px 10px -4px rgb(128 128 128);
        }
    </style>
</head>
<body>
    <div>
        我是一个有阴影的盒子
    </div>
</body>
</html>

再看一下效果👇
在这里插入图片描述

然后我来解释一下这四个值分别代表什么意思

            box-shadow:10px 第一个代表水平阴影的位置（允许负值）
             10px 第一个代表垂直阴影的位置（允许负值）

             10px。第三个代表模糊的距离
              -4px 第四个代表阴影的尺寸
              rgb(128 128 128)第五个代表阴影的颜色;
              ⚠️rgb代表一种透明色，不同的编译器可能有不同的写法，
              比如有的编译器是这种写法：rgb（0 0 0.3）

最后我们在上图的基础上修改一下这些数值，看看会发生什么变化吧！
在这里插入图片描述
这是我修改后的数值👇

同学们也可以鼠标点击右键 ->检查->然后在弹出的页面修改相应的数值，记得点击保存才能看到修改后的页面。这样能更直观的看到效果的变化！

吉米的编程日记

关注

10
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
前端学习-盒子阴影（box-shadow）

同学们也可以鼠标点击右键 ->检查->然后在弹出的页面修改相应的数值，记得点击保存才能看到修改后的页面。这样能更直观的看到效果的变化！最后我们在上图的基础上修改一下这些数值，看看会发生什么变化吧！先上代码（直接复制到你的编译器即可运行）然后我来解释一下这四个值分别代表什么意思。这是我修改后的数值👇。
复制链接

扫一扫