[CSS]给DIV增加阴影效果例子(自用/项目中常用)

项目中经常要用到的给某个DIV增加阴影效果，效果如图：

利用box-shadow只要一行css就可以搞定了

/* 阴影1 */
.yy1 {
    box-shadow: 0 1px 1px 0 rgb(0 0 0 / 20%);
}

/* 阴影2 */
.yy2 {
    /*4个边都有阴影*/
    box-shadow: rgb(0 0 0 / 30%) 0px 0px 10px;

    /* 这是颜色较深的（黑色） */
    /* box-shadow: black 0px 0px 10px; */
}

示例代码如下：

<html>

<head>
    <title>阴影测试</title>
    <style>
        /* 阴影1 */
        .yy1 {
            box-shadow: 0 1px 1px 0 rgb(0 0 0 / 20%);
        }

        /* 阴影2 */
        .yy2 {
            /*4个边都有阴影*/
            box-shadow: rgb(0 0 0 / 30%) 0px 0px 10px;

            /* 这是颜色较深的（黑色） */
            /* box-shadow: black 0px 0px 10px; */
        }
    </style>
</head>

<body>
    <div class="yy1" style="width:200px;height:200px;background:white;margin:20px;text-align:center;">
        阴影1
    </div>
    <div class="yy2" style="width:200px;height:200px;background:white;margin:20px;text-align:center;">
        阴影2
    </div>
</body>

</html>

[CSS]给DIV增加阴影效果例子(自用/项目中常用)

文章评论