百度360必应搜狗淘宝本站头条
linux取消挂载yum卸载下横线怎么打mysql 外网访问权限php打乱数组顺序
当前位置：网站首页 > 编程文章 > 正文

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

qiyuwang 2025-05-16 15:45 2 浏览 0 评论

预览图

首先查看预览图:

原理

  1. 采用了 background 属性 background: inherit;

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

  1. 线性渐变 linear-gradient

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

用法：

// 渐变轴从左上角出发并且呈 45 度。
background: linear-gradient(45deg, red, blue);
  1. 伪元素 ::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;
}
  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博客

欢迎收藏该文章！

相关推荐

你们想要的Python爬虫教程来了:从原理到实践

概述：网络世界的智能采集者Python爬虫是通过自动化程序模拟人类浏览网页行为的技术工具，其核心价值在于高效获取并解析网络数据。得益于Python丰富的第三方库（如requests、Beautiful...

你需要知道的 19 个 console 实用调试技巧

大家好，我是Echa。之前给大家介绍了《...

CSS布局必备技能

Flex是一种用于布局的CSS属性，它使得在容器中的子元素能够灵活地伸缩和排列，从而实现更加自适应和响应式的布局。使用Flex布局可以轻松地创建各种复杂的布局，而无需使用复杂的CSS或者...

我是如何使用ChatGPT和CoPilot作为编码助手的

...

jsoup Selector类学习笔记，快速提升你的HTML处理能力!

Selector类是jsoup库中的一个核心类，用于通过CSS选择器语法来查找HTML文档中的元素。选择器语法通用选择器*：匹配任何元素。标签选择器tag：匹配指定标签名的元素。...

CSS伪类选择器大全:提升网页交互与样式的神奇工具

CSS伪类选择器是前端开发中不可或缺的强大工具，它们允许我们根据元素的状态、位置或用户行为动态地应用样式。本文将全面介绍常用的伪类选择器，并通过代码示例展示其实际应用场景。一、基础交互伪类1.超链接...

简析JS中Document与CSS

如果你是一名前端人员，你单单的使用jq插件显然不够，js在大多时候比较搁置，但你如果前端技术想要提升，那么js的精通对你显得很重要，本文只是他到js的document与css。1.Document与E...

网页世界隐藏的神秘代码语言，竟能这样改变布局

CSS基础：选择器与属性CSS（CascadingStyleSheets）是用于控制网页外观的一门样式表语言。它通过定义HTML元素的显示方式来增强网页的表现力。CSS的选择器允许开发者精确地定位...

Thymeleaf 语法全面详解(史上最全)

Thymeleaf是一个现代化的服务器端Java模板引擎，支持HTML、XML、JavaScript、CSS甚至纯文本。以下是Thymeleaf语法的全面详解，包含所有属性和复杂用法。...

零基础学习HTML之CSS篇内联内部外部样式表和类型选择符

CSS简介CSS(CascadingStyleSheets)层叠样式表。CSS能做些什么？1.使用CSS样式可以有效地对页面进行布局。2.使用CSS样式可以对页面字体、颜色、背景和其他效果实现...

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

预览图首先查看预览图:原理采用了background属性...

CSS中的定位(postion)详解

定义CSSposition属性用于指定一个元素在文档中的定位方式。top，right，bottom和left属性则决定了该元素的最终位置，z-index属性则决定了该元素所在的层级。定位类型1...

CSS selector 小知识学习分享

在设计器中，大家拾取网页元素后，在右侧的属性栏里都会有一个叫“查找路径”的选择框，一般也很少有人用到，打开后里面显示了一堆‘@#yen#%#yen@*T&’的玩意，那么这个“查找路径”到底是个什...

从网站检查中复制CSS代码的最简单方法

在处理网站项目时，您是否曾经对使用开发工具感到沮丧？必须在您正在处理的网页和检查器之间来回切换以查看CSS并进行调整通常可能是一个挑战。值得庆幸的是，有一个浏览器扩展程序可以简化该过程：CSSSca...

XPath 选择器

上篇《Selenium入门（基于Python）...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表