什么是边框阴影？

边框阴影是一种广泛应用于前端开发中的、可以给网页元素添加虚拟、逼真的阴影效果的CSS样式。通常情况下，边框阴影可以让页面看上去更立体、更真实，有时也可以用来强调页面中的某些重要内容。

在CSS3标准中，提供了四种创建边框阴影的方法：

    box-shadow: h-shadow v-shadow blur spread color inset;
    text-shadow: h-shadow v-shadow blur color;
    filter: drop-shadow(h-shadow v-shadow blur color);
    filter: url("data:image/svg+xml;utf8,#drop-shadow");

下面我们将详细介绍这四种方法。

方法一：box-shadow

box-shadow是最为常见的创建边框阴影的方法。通过box-shadow样式，我们可以让网页元素显示出非常逼真的立体感，进而实现更为复杂的页面设计效果。

    /*基础阴影效果*/
    box-shadow: h-shadow v-shadow blur spread color inset;

其中，参数h-shadow表示阴影的水平位置，可以为负值；v-shadow表示阴影的垂直位置，也可以为负值；blur表示阴影的模糊程度；spread表示阴影的扩散程度，控制阴影的大小；color表示阴影的颜色，如果不设置颜色，默认为黑色；inset表示是否将阴影设置为内阴影，如果添加了inset参数，则表示内阴影。

    /*实现一个带有内阴影的div*/
    

        带有内阴影的div
    
    
    .box {
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-shadow: inset 0 0 10px #ccc;
        padding: 20px;
        width: 200px;
        height: 100px;
    }

方法二：text-shadow

text-shadow样式可以在文本或者其他的内联块级元素中添加阴影效果。

    /*text-shadow样式*/
    text-shadow: h-shadow v-shadow blur color;

其中，h-shadow和v-shadow的解释与box-shadow样式中的一致，blur为阴影的模糊程度，color为阴影的颜色。

    /*实现一个带有文字阴影的h1*/
    

        带有文字阴影的标题
    
    
    .title {
        text-shadow: 1px 1px 1px #ccc;
    }

方法三：filter: drop-shadow

filter: drop-shadow是CSS提供的另一种创建边框阴影的方式。

    /*filter: drop-shadow样式*/
    filter: drop-shadow(h-shadow v-shadow blur color);

与box-shadow样式语法类似，drop-shadow也接受h-shadow、v-shadow、blur和color参数，用于指定阴影的大小、颜色和位置。

    /*实现一个带有滤镜阴影的div*/
    

        带有滤镜阴影的div
    
    
    .box {
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 5px;
        filter: drop-shadow(0 0 10px #ccc);
        padding: 20px;
        width: 200px;
        height: 100px;
    }

方法四：SVG过滤器

使用SVG过滤器，可以实现更为复杂的阴影效果，同时也更具有可定制性。

    /*SVG过滤器样式*/
    filter: url("data:image/svg+xml;utf8,#drop-shadow");

这段CSS样式在filter属性中使用了一个SVG过滤器，其中设置了多个filter效果，组合用于创建更加复杂的阴影效果。

    /*实现一个带有SVG滤镜阴影的div*/
    

        带有SVG滤镜阴影的div
    
    
    .box {
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 5px;
        filter: url("data:image/svg+xml;utf8,#drop-shadow");
        padding: 20px;
        width: 200px;
        height: 100px;
    }