CSS 高级区块效果——WEB开发系列25

CSS提供了多种工具和属性，使我们能够创建视觉上引人注目的效果。今天我们继续将深入了解几种高级CSS效果：盒子阴影、滤镜、混合模式和文本背景裁剪，提升网页设计的质感和深度。

一、盒子阴影（Box Shadow）

对于盒子元素，存在一个类似的属性——​​box-shadow​​​，用于在实际的元素盒子上应用一个或多个阴影。与文本阴影一样，盒子阴影在大多数浏览器中也有良好的支持，但仅在IE9及更高版本中可用。对于使用旧版IE的用户，他们可能会看到没有阴影的效果。

盒子阴影是CSS中一个非常实用的视觉效果，它可以为元素添加阴影，增强其立体感和层次感。我们可以使用​​box-shadow​​​属性来实现这个效果。它的基本语法如下：

box-shadow: [水平偏移] [垂直偏移] [模糊半径] [阴影扩展半径] [颜色];

1、单个盒子阴影

最基本的盒子阴影效果很简单。下面的例子展示了一个带有单个盒子阴影的元素：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>单个盒子阴影</title><style>.box {width: 200px;height: 200px;background-color: #f5f5f5;box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);}</style>
</head>
<body><div class="box"></div>
</body>
</html>

上述例子中，​​.box​​元素的阴影设置如下：

  • 水平偏移：10px（向右偏移10像素）
  • 垂直偏移：10px（向下偏移10像素）
  • 模糊半径：15px（阴影的模糊程度）
  • 颜色：​​rgba(0, 0, 0, 0.3)​​​（半透明黑色）

2、多个盒子阴影

通过为元素设置多个阴影，可以创建更复杂的视觉效果。下面的代码展示了如何实现多个盒子阴影：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>多个盒子阴影</title><style>.box {width: 200px;height: 200px;background-color: #f5f5f5;box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(0, 0, 0, 0.2);}</style>
</head>
<body><div class="box"></div>
</body>
</html>

例子中，​​.box​​元素有两个阴影：

  • 第一个阴影：向右下方偏移5px，模糊半径10px，颜色为半透明黑色。
  • 第二个阴影：向左上方偏移5px，模糊半径10px，颜色为较淡的半透明黑色。

这种组合效果可以产生更丰富的视觉层次感。

二、滤镜（Filters）

CSS 滤镜提供了一种对元素进行过滤的方式，允许你对元素应用各种视觉效果，如模糊、亮度调整、对比度改变等。类似于在 Photoshop 等设计软件中应用过滤效果。接下来首先来介绍其语法，并展示其带来的有趣效果。

基本上滤镜可以应用于任何类型的元素，包括块级元素和行内元素——只需使用 ​​filter​​ 属性，并指定一个滤镜函数的值即可。一些滤镜选项与其他 CSS 特性效果相似，例如 ​​drop-shadow()​​ 的效果与 ​​box-shadow​​ 或 ​​text-shadow​​​ 相似。但滤镜的独特之处在于，它们作用于元素内容的实际形状，而不仅仅是整个盒子，这种效果通常看起来更出色，尽管有时可能不会完全符合预期。

​​filter​​​属性的基本语法如下：

filter: [效果1] [效果2] ...;

1、常见滤镜效果

  • 模糊（blur）：使元素变得模糊。单位是像素。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>模糊滤镜</title><style>.box {width: 200px;height: 200px;background-color: #f5f5f5;filter: blur(5px);}</style>
</head>
<body><div class="box"></div>
</body>
</html>

  • 亮度（brightness）：调整元素的亮度。值大于1会增加亮度，小于1则减小亮度。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>亮度滤镜</title><style>.box {width: 200px;height: 200px;background-color: #f5f5f5;filter: brightness(0.8);}</style>
</head>
<body><div class="box"></div>
</body>
</html>

  • 对比度（contrast）：调整元素的对比度。值大于100%会增加对比度，小于100%则减小对比度。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>对比度滤镜</title><style>.box {width: 200px;height: 200px;background-color: #f5f5f5;filter: contrast(150%);}</style>
</head>
<body><div class="box"></div>
</body>
</html>

  • 灰度（grayscale）：将元素转换为灰度图像。值为100%时完全灰度。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>灰度滤镜</title><style>.box {width: 200px;height: 200px;background-color: #f5f5f5;filter: grayscale(100%);}</style>
</head>
<body><div class="box"></div>
</body>
</html>

2、组合滤镜效果

滤镜效果可以组合使用，通过空格分隔。例如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>组合滤镜效果</title><style>.box {width: 200px;height: 200px;background-color: #f5f5f5;filter: blur(5px) brightness(0.8) contrast(120%);}</style>
</head>
<body><div class="box"></div>
</body>
</html>

元素被模糊、降低亮度并增加对比度，产生了复合效果。

三、混合模式（Blend Modes）

CSS混合模式允许你定义元素与其背景之间的交互方式，产生各种有趣的效果。当两个元素重叠时，这种效果会影响每个像素的最终显示颜色，即这些像素的颜色将根据其原始颜色和下层元素颜色的混合结果来呈现。对于经常使用Photoshop 等图形软件的朋友来说，混合模式应该比较熟悉。

在 CSS 中，有两个相关的属性：

  • ​​background-blend-mode​​：用于将单个元素的多重背景图像和背景颜色进行混合。
  • ​​mix-blend-mode​​​：用于将一个元素与其覆盖的元素的背景和内容进行混合。

1、背景混合模式（background-blend-mode）

​​background-blend-mode​​用于控制背景图像和背景颜色的混合模式。它的常见值包括 ​​normal​​、​​multiply​​、​​screen​​、​​overlay​​、​​darken​​​ 等。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>背景混合模式</title><style>.box {width: 300px;height: 200px;background-color: #ff0000;background-image: url('https://via.placeholder.com/300x200');background-blend-mode: multiply;}</style>
</head>
<body><div class="box"></div>
</body>
</html>

背景颜色和背景图像以 ​​multiply​​​ 模式混合，生成了一种加深的效果。

2、混合模式（mix-blend-mode）

​​mix-blend-mode​​用于定义元素如何与其父元素混合。常见的值包括 ​​normal​​、​​multiply​​、​​screen​​、​​overlay​​、​​darken​​​ 等。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>混合模式</title><style>.container {width: 300px;height: 200px;background-color: #8af9cb;position: relative;}.box {width: 150px;height: 150px;background-color: #f8a8a8;mix-blend-mode: screen;position: absolute;top: 25px;left: 25px;}</style>
</head>
<body><div class="container"><div class="box"></div></div>
</body>
</html>

​​.box​​元素的背景颜色通过 ​​screen​​ 模式与 ​​.container​​​ 背景颜色混合，产生了亮化的效果。

四、文本背景裁剪（-webkit-background-clip: text）

​​-webkit-background-clip: text​​​ 是一个Webkit特有的属性，它允许我们将背景图像或颜色裁剪到文本的前景中，从而实现图像填充文本的效果。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文本背景裁剪</title><style>.text {font-size: 72px;font-weight: bold;background: linear-gradient(to right, #ff0000, #0000ff);-webkit-background-clip: text;color: transparent;}</style>
</head>
<body><div class="text">背景裁剪文本</div>
</body>
</html>

​​background-clip: text​​ 将背景渐变裁剪到文本中，使文本显示渐变背景色，同时 ​​color: transparent​​​ 使文本本身的颜色透明，以便只显示背景。

综合练习

题 1：创造一个具有多个阴影、滤镜和混合模式的复杂元素

要求：

  1. 创建一个​​div​​元素，具有多个盒子阴影、滤镜和混合模式效果。
  2. 使用盒子阴影创建一个有层次感的效果。
  3. 结合滤镜效果使元素具有模糊和调整亮度的效果。
  4. 应用混合模式，使元素与其背景交互，产生独特效果。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>综合练习题 1</title><style>.complex-box {width: 300px;height: 300px;background-color: #ffcc00;background-image: url('https://via.placeholder.com/300x300');background-blend-mode: overlay;box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5), -10px -10px 20px rgba(0, 0, 0, 0.3);filter: blur(5px) brightness(0.8);position: relative;margin: 50px;}</style>
</head>
<body><div class="complex-box"></div>
</body>
</html>

题 2：创建一个带有文本背景裁剪和多个滤镜效果的标题

要求：

  1. 创建一个​​h1​​标题，背景使用渐变色。
  2. 将背景裁剪到文本中，使文本显示背景渐变。
  3. 应用多个滤镜效果（如模糊、亮度调整），使标题更具视觉冲击力。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>综合练习题 2</title><style>h1 {font-size: 80px;font-weight: bold;background: linear-gradient(to right, #ff0000, #0000ff);-webkit-background-clip: text;color: transparent;filter: blur(2px) brightness(1.2) contrast(1.1);text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);}</style>
</head>
<body><h1>动态背景文本</h1>
</body>
</html>

如有表述错误及欠缺之处敬请批评指正。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/53389.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

学会这2招，让你轻松提取长视频中的文案！

学会这2招，让你轻松提取长视频中的文案！

在当今数字化时代&#xff0c;短视频已成为备受欢迎的内容形式&#xff0c;众多品牌和营销人员借助短视频推广宣传产品。 短视频文案作为短视频内容的关键部分&#xff0c;能够在极短时间内向受众传达品牌信息和产品特点。 不过&#xff0c;短视频文案的提取和创作确实极具挑…
阅读更多...
ceph中pg与pool关系

ceph中pg与pool关系

在Ceph中&#xff0c;PG&#xff08;Placement Group&#xff09;和Pool是非常重要的概念&#xff0c;它们在Ceph的存储架构中扮演着关键角色。理解这些概念有助于更好地管理和优化Ceph集群。下面详细介绍这两个概念及其相互关系。 Pool&#xff08;存储池&#xff09; 定义&am…
阅读更多...
【重学 MySQL】十二、SQL 语言的规则与规范

【重学 MySQL】十二、SQL 语言的规则与规范

【重学 MySQL】十二、SQL 语言的规则与规范 基本规则注释语法规则命名规则基本命名规则具体命名规范其他注意事项 数据导入指令 SQL&#xff08;Structured Query Language&#xff0c;结构化查询语言&#xff09;的规则与规范是确保SQL语句能够正确执行、提高代码可读性和可维…
阅读更多...
【2024数模国赛赛题思路公开】国赛C题第三套思路丨无偿自提

【2024数模国赛赛题思路公开】国赛C题第三套思路丨无偿自提

C题参考思路 C题是一道优化问题&#xff0c;目的是根据题目所给的种植限制条件以及附件数据建立目标条件优化模型&#xff0c;优化种植策略&#xff0c;有利于方便田间管理&#xff0c;提高生产效益&#xff0c;减少各种不确定因素可能造成的种植风险。整个题目最重要的问题在…
阅读更多...
Java框架第四课(对Spring的补充Spring web）

Java框架第四课(对Spring的补充Spring web）

目录 一.Spring web的认识 (1)Spring Web概念 (2)Spring web的特点 (3)Springweb运行的流程 (4)Springweb运行的流程图 二.搭建Spring web 三.自定义处理器类搭建 (1)处理器类配置 (2)处理器类接受请求 (3)获得请求数据 四.拦截器 (1)关于拦截器&#xff1a; (2)拦截器的…
阅读更多...
Axure中继器动态数据图表制作

Axure中继器动态数据图表制作

在Axure RP中&#xff0c;中继器&#xff08;Repeater&#xff09;是一个非常强大的工具&#xff0c;它允许设计者动态地展示和交互数据&#xff0c;进而创建各种复杂的数据可视化图表&#xff0c;如柱状图、条形图、堆叠图、散点图和对比图。以下将详细介绍如何使用中继器来设…
阅读更多...
持续集成与持续部署（CI/CD）的深入探讨

持续集成与持续部署（CI/CD）的深入探讨

在现代软件开发中&#xff0c;持续集成&#xff08;CI&#xff09;和持续部署&#xff08;CD&#xff09;已成为不可或缺的实践。这些方法旨在加快软件交付的速度&#xff0c;同时提高软件的质量和稳定性。通过CI/CD&#xff0c;开发团队可以频繁地将代码更改集成到主分支&…
阅读更多...
算法练习题14——leetcode84柱形图中最大的矩形（单调栈）

算法练习题14——leetcode84柱形图中最大的矩形（单调栈）

题目描述&#xff1a; 解题思路&#xff1a; 要解决这个问题&#xff0c;我们需要找到每个柱子可以扩展的最大左右边界&#xff0c;然后计算以每个柱子为高度的最大矩形面积。 具体步骤如下&#xff1a; 计算每个柱子左侧最近的比当前柱子矮的位置&#xff1a; 使用一个单调…
阅读更多...
java后端保存的本地图片通过ip+端口直接访问

java后端保存的本地图片通过ip+端口直接访问

直接上代码吧 package com.ydx.emms.datapro.controller;import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry; import org.springframework.web.servlet.config.annotation.…
阅读更多...
函数式接口实现策略模式

函数式接口实现策略模式

函数式接口实现策略模式 1.案例背景 我们在日常开发中&#xff0c;大多会写if、else if、else 这样的代码&#xff0c;但条件太多时&#xff0c;往往嵌套无数层if else,阅读性很差&#xff0c;比如如下案例&#xff0c;统计学生的数学课程的成绩&#xff1a; 90-100分&#…
阅读更多...
idea添加本地环境执行模版

idea添加本地环境执行模版

用Flink的环境执行时&#xff0c;因为最后会打包放服务器&#xff0c;所以有些jar包将不会打包上传&#xff0c;这些jar包用<scope>provided</scope>标记 所以这些jar包在本地运行时也会不提供&#xff0c;为了程序在本地能跑&#xff0c;我们每次执行是需手动添加…
阅读更多...
JAVA-接口(一万四千字讲解)

JAVA-接口(一万四千字讲解)

目录 一、接口的概念 二、语法规则 三、接口使用 四、接口特性 五、实现多个接口 六、接口间的继承 七、接口使用实例 1.Comparable 2.写一个自己的sort 3.Comparator 八、类的克隆Clonable 1.Clonable接口 2.浅拷贝 3.深拷贝 九、抽象类和接口的区别 十、 Obje…
阅读更多...
芯片时钟树评估的关键性能参数

芯片时钟树评估的关键性能参数

前面有很多文章都介绍了PI性能的影响&#xff0c;也介绍了PSIJ对信号或时钟性能的影响&#xff0c;对于SOC设计&#xff0c;为了更好的理解电源完整性在芯片设计中的重要作用&#xff0c;对芯片的时钟树设计需要足够理解才能更好的明白电源完整性的影响。 时钟分布网络设计一直…
阅读更多...
最基本的SELECT...FROM结构

最基本的SELECT...FROM结构

第0种&#xff1a;最基本的查询语句 SELECT 字段名&#xff0c;字段名 FROM 表名 SELECT 1&#xff1b; SELECT 11,3*2&#xff1b; FROM SELECT 11,3*2 FROM DUAL&#xff1b;#dual&#xff1a;伪表 我们可以用它来保持一个平衡 这里我们的值不需要在任何一个表里&#xf…
阅读更多...
9、类和对象

9、类和对象

9.1 封装 9.1.1 封装的例子 class Student { public:string name;int age; public:void setName(string name_) {name name_;} }; int main() {Student s1;s1.setName("zhangsan");return 0; }类中的行为都叫做成员&#xff0c;例如成员属性&#xff0c;成员变量&…
阅读更多...
飞速（FS）S5800-48T4S：如何使用MLAG？

飞速（FS）S5800-48T4S：如何使用MLAG？

MLAG&#xff08;多机箱链路聚合组&#xff09;可实现无缝故障转移并优化带宽利用率&#xff0c;从而增强网络冗余和提高可扩展性。它允许多台交换机作为一个统一实体运行&#xff0c;从而降低停机风险并确保网络运行不中断。飞速&#xff08;FS&#xff09;S5800-48T4S是一款支…
阅读更多...
二维高斯函数的两种形式

二维高斯函数的两种形式

第一种形式很常见 多元正态分布 多元正态分布&#xff08;Multivariate Normal Distribution&#xff09;&#xff0c;也称为多变量正态分布或多维正态分布&#xff0c;是统计学中一种重要的概率分布&#xff0c;用于描述多个随机变量的联合分布。 假设有 n n n 个随机变量…
阅读更多...
【LabVIEW学习篇 - 18】：人机界面交互设计02

【LabVIEW学习篇 - 18】：人机界面交互设计02

文章目录 错误处理函数简单错误处理器通用错误处理器清楚错误合并错误错误代码至错误簇转换查找第一个错误 鼠标指针 错误处理函数 在LabVIEW中&#xff0c;是通过错误输入簇和错误输出簇来传递错误信息&#xff0c;可以将底层错误信息传递到上层VI。设计人员需要对不同程度的…
阅读更多...
2024 数学建模高教社杯 国赛（C题）| 农作物的种植策略 | 建模秘籍文章代码思路大全

2024 数学建模高教社杯 国赛（C题）| 农作物的种植策略 | 建模秘籍文章代码思路大全

铛铛&#xff01;小秘籍来咯&#xff01; 小秘籍团队独辟蹊径&#xff0c;运用等多目标规划等强大工具&#xff0c;构建了这一题的详细解答哦&#xff01; 为大家量身打造创新解决方案。小秘籍团队&#xff0c;始终引领着建模问题求解的风潮。 抓紧小秘籍&#xff0c;我们出发…
阅读更多...
高并发内存池（一）：项目介绍与定长内存池的实现

高并发内存池（一）：项目介绍与定长内存池的实现

目录​​​​​​​ 项目介绍 池化技术 内存池 内存碎片 malloc工作原理 定长内存池 申请内存 释放内存 定位new VirtualAlloc函数 封装VirtualAlloc 定长内存池的最终代码 项目介绍 项目原型&#xff1a;goole的开源项目tcmalloc&#xff08;Thread-Caching Mal…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023