阴影（box-shadow 详细教程）

最新推荐文章于 2024-04-02 08:40:43 发布

星河！

最新推荐文章于 2024-04-02 08:40:43 发布

阅读量191

点赞数

文章标签： css 前端 css3 3d vscode html

本文链接：https://blog.csdn.net/weixin_45398972/article/details/132163218

版权

box-shadow

在网页中使用 box-shadow 属性定义阴影
box-shadow: 水平偏移垂直偏移模糊扩散颜色;

        box-shadow: 0 0 10px 0 rgba(0, 0, 0, .4);

在这里插入图片描述

        box-shadow: 25px 0 10px 0 rgba(0, 0, 0, .4);
                /* 水平偏移 */

在这里插入图片描述

        box-shadow: 25px 25px 10px 0 rgba(0, 0, 0, .4);
                    /* 垂直偏移 */

在这里插入图片描述

        box-shadow: 25px 25px 0px 0 rgba(0, 0, 0, .4);
                             /* 模糊 */

在这里插入图片描述

        box-shadow: 25px 25px 0 10px rgba(0, 0, 0, .4);
                             /* 扩散 */

在这里插入图片描述

        box-shadow: 25px 25px 0 10px rgba(12, 175, 172, 0.4);
                                    /* 颜色 */

在这里插入图片描述

        box-shadow: inset 25px 25px 10px 0 #18c7a4;
		内部阴影

在这里插入图片描述
我们将阴影想右下方移动，左上方添加一个浅色阴影，这样就像光源从左上方打过来

        /* 我们将阴影想右下方移动 */
        box-shadow: 8px 8px 8px rgba(0, 0, 0, .3);
        /* 左上方添加一个浅色阴影 */
        box-shadow: -8px -8px 8px rgba(255, 255, 255, .7);
        /* 合起来 */
        box-shadow: 8px 8px 8px rgba(0, 0, 0, .3),
            -8px -8px 8px rgba(255, 255, 255, .7);

在这里插入图片描述
如果修改为内阴影，元素在屏幕上像是凹下去的形状

        /* 内阴影 */
        box-shadow: inset 8px 8px 8px rgba(0, 0, 0, .3),
            inset -8px -8px 8px rgba(255, 255, 255, .7);

在这里插入图片描述
此时再添加一个外部阴影，此时就变成了一个棋子

        /* 棋子 */
        box-shadow: inset 8px 8px 8px rgba(0, 0, 0, .3),
            inset -8px -8px 8px rgba(255, 255, 255, .7),
            -10px -10px 10px rgba(0, 0, 0, .4);
        border-radius: 50%;

在这里插入图片描述
当我们将背景调暗，阴影也可以变成光源

		box-shadow: 0 0 12px 0 rgba(0, 255, 255, .7);

在这里插入图片描述
微调参数，我们就得到一个月牙

        box-shadow: 50px 0 0 0 rgba(255, 255, 0, .7);

在这里插入图片描述
在鼠标悬浮状态，降低影子颜色，同时元素向上移动并放大，会有一个很好的空间效果

	.box{
        box-shadow: 0 5px 12px rgba(0, 0, 0, .5);
        transition: all .3s;
    }

    .box:hover {
        transform: translateY(-8px) scale(1.01, 1.01);
        box-shadow: 0 10px 20px rgba(0, 0, 0, .3);
    }```
![在这里插入图片描述](https://img-blog.csdnimg.cn/b21256704e544515898c4a98a7ece75c.png)