css阴影实现浮雕阴影

前言

最近CSS大佬chokcoco又写了一篇关于立体阴影的效果，非常有意思，感觉实际项目中会用到，特地学习一下。

文章地址：CSS 阴影进阶，实现更加的立体的阴影效果！

css阴影基础

这里直接那大佬文章中的介绍。
CSS 中，明面上可以实现阴影的有三个属性：

• box-shadow - 盒阴影
• text-shadow - 文字阴影
• filter: drop-shaodw() - 滤镜内的阴影

box-shadow - 盒阴影：

text-shadow - 文字阴影：

filter: drop-shaodw() - 滤镜内的阴影：

浮雕阴影

浮雕阴影，它的本质还是 box-shadow 和 text-shadow，只是需要控制好颜色的配合以及内外阴影的一起使用。核心就是 2 点：

• 背景色与内容（文本或者盒子颜色）一致
• 使用两个相反的方向，使用两组对比明显的颜色值，来实现凹凸效果。

文字浮雕

<div class="main">
    <p>浮雕阴影</p>
</div>

.main {
    
    
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #999;

    p {
    
    
        font-size: 80px;
        color: #999;
        //给文字添加黑色阴影
        //再反向，也就是 -1px x、y 方向添加一个黑色相对，也就白色的阴影：
        text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
    }
}

效果图

新拟态风格阴影
将运用在文字上的技巧，扩展延伸到容器上，就能得到最近比较火的拟态风格阴影，其原理也是大同小异。
两个阴影，使用两个相反的方向，使用两组对比明显的颜色值，来实现凹凸效果。与文字不同的是，这里的凹效果，我们需要使用盒子的内阴影实现。

<div class="main">
    <div class="item">浮雕阴影</div>
    <div class="item item1">浮雕阴影</div>
</div>

.main {
    
    
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    background: #E9ECEF;

    .item {
    
    
        width: 120px;
        height: 120px;
        background: #e9ecef;
        color: #333;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow:
            7px 7px 12px rgba(0, 0, 0, .4),
            -7px -7px 12px rgba(255, 255, 255, .9);
    }

    .item1 {
    
    
        box-shadow:
            inset -7px -7px 12px rgba(255, 255, 255, .9),
            inset 7px 7px 12px rgba(0, 0, 0, .4);
    }
}

效果图：

<div class="main">
    <div class="item">浮雕阴影</div>
</div>

.main {
    
    
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    background: #E9ECEF;

    .item {
    
    
        width: 120px;
        height: 120px;
        transition: .2s all;
        background: #E9ECEF;
        color: #333;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 7px 7px 12px rgba(0, 0, 0, .4),
            -7px -7px 12px rgba(255, 255, 255, .9),
            inset 0 0 0 rgba(255, 255, 255, .9),
            inset 0 0 0 rgba(0, 0, 0, .4);

        &:active {
    
    
            box-shadow: 0 0 0 rgba(0, 0, 0, .4),
                0 0 0 rgba(255, 255, 255, .9),
                inset -7px -7px 12px rgba(255, 255, 255, .9),
                inset 7px 7px 12px rgba(0, 0, 0, .4);
        }
    }

效果图：