css 设置盒子阴影，阴影和背景图保持一致
预览图
首先查看预览图:
原理
- 采用了 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博客
欢迎收藏该文章！