css 用边框属性实现阴影效果

• #css

什么场景需要使用 border 实现阴影效果

对于前端开发者而言，99% 的情况下写阴影都会使用 box-shadow 属性。

剩下的 1% 是一些特殊需求，比如要将前端页面导出为图片文件，会用到一些第三方库 html2canvas，底层原理：将 html+css 编写的前端页面用 canvas api 重写一遍，canvas 有个 API: toDataURL() 可以将画布内容生成图片。

这个过程中有一些 css 属性是无法用 canvas 实现的，box-shadow 阴影效果就是其中一个属性。

如何使用 border 实现阴影效果

下方有两个容器，左边是使用 box-shadow 实现的阴影效果，右边是使用 border 实现的阴影效果。

实现原理是创建多个子 div，每个子 div 设置边框，通过调整边框的颜色和位置，实现阴影效果。

代码如下：

<style>
    .wrapper {
        display: flex;
        gap: 30px;
    }

    .box {
        width: 200px;   
        height: 100px;
        position: relative;
        box-sizing: border-box;
    }
    
    .box-shadow {
        box-shadow: 2px 2px 4px 1px rgba(0,0,0,0.5);
    } 

    .border {
        position: absolute;
        width: 100%;
        height: 100%;
    }

    .border1 {
        border-left: 1px solid rgba(0,0,0,0.1);
        border-top: 1px solid rgba(0,0,0,0.1);
        border-right: 1px solid rgba(0,0,0,0.1);
        border-bottom: 1px solid rgba(0,0,0,0.1);
        left: 0px;
        top: 0px;
    }

    .border2 {
        border-right: 1px solid rgba(0,0,0,0.5);
        border-bottom: 1px solid rgba(0,0,0,0.5);
        left: 1px;
        top: 1px;
    }

    .border3 {
        border-right: 1px solid rgba(0,0,0,0.4);
        border-bottom: 1px solid rgba(0,0,0,0.4);
        left: 2px;
        top: 2px;
    }

    .border4 {
        border-right: 1px solid rgba(0,0,0,0.3);
        border-bottom: 1px solid rgba(0,0,0,0.3);
        left: 3px;
        top: 3px;
    }
    
    .border5 {
        border-right: 1px solid rgba(0,0,0,0.2);
        border-bottom: 1px solid rgba(0,0,0,0.2);
        left: 4px;
        top: 4px;
    }
    
    .border6 {
        border-right: 1px solid rgba(0,0,0,0.1);
        border-bottom: 1px solid rgba(0,0,0,0.1);
        left: 5px;
        top: 5px;
    }
</style>

<div class="wrapper">
    <div class="box box-shadow">
        这是一个容器
    </div>
    <div class="box">
        <div class="border border1"></div>
        <div class="border border2"></div>
        <div class="border border3"></div>
        <div class="border border4"></div>
        <div class="border border5"></div>
        <div class="border border6"></div>
        这是一个容器
    </div>
</div>

↶ 返回首页 ↶