预览图

首先查看预览图:

原理

采用了 background 属性 background: inherit;

inherit 关键字使得元素获取其父元素的计算值。它可以应用于任何 CSS 属性，包括 CSS 简写 all。对于继承属性，inherit 关键字只是增强了属性的默认行为，通常只在覆盖原有的值的时候使用。继承始终来自文档树中的父元素，即使父元素不是包含块。

线性渐变 linear-gradient

线性渐变由一个轴 (梯度线) 定义，其上的每个点具有两种或多种的颜色，且轴上的每个点都具有独立的颜色。为了构建出平滑的渐变，linear-gradient() 函数构建一系列垂直于渐变线的着色线，每一条着色线的颜色则取决于与之垂直相交的渐变线上的色点。

用法：

// 渐变轴从左上角出发并且呈 45 度。
background: linear-gradient(45deg, red, blue);

伪元素 ::after

CSS伪元素::after用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。

.content-item::after {
            content: "";
            width: 280px;
            height: 280px;
            /* 获取其父元素的计算值 */
            background: inherit;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            filter: blur(20px) brightness(80%);
            z-index: -1;
}

滤镜 filter

在该程序中调用了2个函数： blur(20px) brightness(80%);

blur()：将高斯模糊应用于输入图像。

brightness()：将线性乘法器应用于输入图像，以调整其亮度。值为 0% 将创建全黑图像；值为 100% 会使输入保持不变，其他值是该效果的线性乘数。如果值大于 100% 将使图像更加明亮。

至于代码中还有其他知识点，也就是 margin 、position 等基础内容了。

全部代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阴影和背景一致</title>
    <style>
        .content-item {
            position: relative;
            width: 260px;
            height: 260px;
            border-radius: 10px;
            /* background: linear-gradient(90deg, #e66465, #9198e5); */
            background: linear-gradient(217deg, rgba(255, 0, 0, .8), rgba(255, 0, 0, 0) 70.71%),
                linear-gradient(127deg, rgba(0, 255, 0, .8), rgba(0, 255, 0, 0) 70.71%),
                linear-gradient(336deg, rgba(0, 0, 255, .8), rgba(0, 0, 255, 0) 70.71%);
            margin: 100px auto;
        }

        .content-item::after {
            content: "";
            width: 280px;
            height: 280px;
            /* 获取其父元素的计算值 */
            background: inherit;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            filter: blur(20px) brightness(80%);
            z-index: -1;
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="content-item"></div>
    </div>
</body>

</html>

参考文章

css 设置盒子阴影，阴影和背景图保持一致_css filter 阴影色和背景色一致_随忆~的博客-CSDN博客

欢迎收藏该文章！

前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

css 设置盒子阴影，阴影和背景图保持一致

预览图

原理

全部代码

参考文章