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;短视频文案的提取和创作确实极具挑…
阅读更多...
Python精选200Tips：81-90

Python精选200Tips：81-90

No rules, no standard 081 缩进082 行长度083 空行084 空格085 文档字符串086 导入顺序087 命名规范088 类型提示089 注释090 主程序入口过了这一关，就可以享受用Python创造世界的感觉 运行系统：macOS Sonoma 14.6.1 Python编译器：PyCharm 2024.1.4 (Community Edition) P…
阅读更多...
ceph中pg与pool关系

ceph中pg与pool关系

在Ceph中&#xff0c;PG&#xff08;Placement Group&#xff09;和Pool是非常重要的概念&#xff0c;它们在Ceph的存储架构中扮演着关键角色。理解这些概念有助于更好地管理和优化Ceph集群。下面详细介绍这两个概念及其相互关系。 Pool&#xff08;存储池&#xff09; 定义&am…
阅读更多...
FFmpeg的日志系统（ubuntu 环境）

FFmpeg的日志系统（ubuntu 环境）

1. 新建.c文件 vim ffmpeg_log.c2. 输入文本 #include<stdio.h> #include<libavutil/log.h> int main() {av_log_set_level(AV_LOG_DEBUG);av_log(NULL,AV_LOG_INFO,"hello world");return 0; }当log level < AV_LOG_DEBUG 都可以印出来 #define A…
阅读更多...
【重学 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)拦截器的…
阅读更多...
13、Flink SQL 的 时间属性 介绍

13、Flink SQL 的 时间属性 介绍

时间属性 a）概述 Flink 可以基于几种不同的 时间 概念来处理数据。 处理时间 指的是执行具体操作时的机器时间（例如 Java的 System.currentTimeMillis()) ）事件时间 指的是数据本身携带的时间，这个时间是在事件产生时的时间。摄入时间 指的是数据进入 Flink 的时间；在系…
阅读更多...
Axure中继器动态数据图表制作

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

在Axure RP中&#xff0c;中继器&#xff08;Repeater&#xff09;是一个非常强大的工具&#xff0c;它允许设计者动态地展示和交互数据&#xff0c;进而创建各种复杂的数据可视化图表&#xff0c;如柱状图、条形图、堆叠图、散点图和对比图。以下将详细介绍如何使用中继器来设…
阅读更多...
【TS高频面试题】interface与type的区别

【TS高频面试题】interface与type的区别

参考文章 一、基本概念 1. type&#xff08;类型别名&#xff09; 用来给一个类型起新名字&#xff0c;使用 type 创建类型别名。 2. interface&#xff08;接口&#xff09; 专门用于定义对象的结构&#xff08;比如属性和方法&#xff09; 二、相同点 &#xff08;1&a…
阅读更多...
持续集成与持续部署（CI/CD）的深入探讨

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

在现代软件开发中&#xff0c;持续集成&#xff08;CI&#xff09;和持续部署&#xff08;CD&#xff09;已成为不可或缺的实践。这些方法旨在加快软件交付的速度&#xff0c;同时提高软件的质量和稳定性。通过CI/CD&#xff0c;开发团队可以频繁地将代码更改集成到主分支&…
阅读更多...
调用火山云的语音生成TTS和语音识别STT

调用火山云的语音生成TTS和语音识别STT

首先需要去火山云的控制台开通TTS和STT服务语音技术 (volcengine.com) 火山这里都提供了免费的额度可以使用 我这里是使用了java来调用API 目前我还了解到阿里的开源项目SenseVoice&#xff08;STT&#xff09;和CosyVoice(TTS)非常的不错&#xff0c;但是都是使用Python开发…
阅读更多...
prometheus删除指定metrics下收集的值

prometheus删除指定metrics下收集的值

Prometheus 删除指定 Metric 官方文档&#xff1a; ​ - https://prometheus.io/docs/prometheus/latest/querying/api/#tsdb-admin-apis Prometheus 的管理 API 接口&#xff0c;官方到现在一共提供了三个接口&#xff0c;对应的分别是快照功能、数据删除功能、数据清理功能…
阅读更多...
js 创建 React 项目

js 创建 React 项目

起因(目的): js 很久没写了。 react js 之前粗略看过, 最近又需要用到, 继续学习&#xff0c; 记录 积累。 1. 新建 React 项目 的几种方法。 官方建议使用 next 来创建 React 项目&#xff0c; 但是我觉得太复杂了。以后再看看. npx create-next-applatest # !!! 不建议使…
阅读更多...
算法练习题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.…
阅读更多...
Qt中Q_PROPERTY的作用，以及必要性和使用场景

Qt中Q_PROPERTY的作用，以及必要性和使用场景

作为一个跨平台框架&#xff0c;Qt没有依赖那些非标准的编译器特性&#xff0c;比如&#xff1a;__property或者[property]。Qt的解决方案适用于Qt支持平台下的任何标准C编译器。它基于元对象系统&#xff08;Meta Object Sytstem&#xff09;&#xff0c;该系统还提供了信号槽…
阅读更多...
linux curl命令介绍以及使用

linux curl命令介绍以及使用

文章目录 curl 简介curl 的安装基本用法发送GET请求将响应内容保存到文件显示请求的头部信息发送POST请求上传文件携带请求头处理重定向通过代理发送请求下载文件指定请求的超时时间 高级用法模拟浏览器行为保持会话&#xff08;Cookie&#xff09;验证HTTPS请求总结 在Linux中…
阅读更多...
函数式接口实现策略模式

函数式接口实现策略模式

函数式接口实现策略模式 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;我们每次执行是需手动添加…
阅读更多...
最新文章

Copyright @ 2022~2023