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

news2024/9/23 11:21:41

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.coloradmin.cn/o/2101319.html

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

相关文章

申请联通卡时，为什么需要上传身份证呢？

申请联通卡时，为什么需要上传身份证呢？

我们在后台收到了很多朋友的私信&#xff0c;除了咨询流量卡套餐方面的问题之外&#xff0c;也有不少朋友是咨询流量卡申请方面的问题&#xff0c;今天&#xff0c;小编就回答一个很有代表性的问题&#xff0c;为什么申请联通卡时要上传身份证信息&#xff0c;而其他的运营商就…
阅读更多...
局域网IP地址老是冲突/环路？这个关键点绝对被你忽略了

局域网IP地址老是冲突/环路？这个关键点绝对被你忽略了

号主&#xff1a;老杨丨11年资深网络工程师&#xff0c;更多网工提升干货&#xff0c;请关注公众号&#xff1a;网络工程师俱乐部 下午好&#xff0c;我的网工朋友。 在现代企业环境中&#xff0c;局域网(LAN)是支撑日常业务运营的关键基础设施之一。 但随着网络规模的不断扩…
阅读更多...
12、Django Admin在列表视图页面上显示计算字段

12、Django Admin在列表视图页面上显示计算字段

两种方法&#xff1a; 注册模型有两种方式&#xff0c;需要首先添加或者修改admin中的注册模型如下方式 admin.register(Origin) class OriginAdmin(admin.ModelAdmin):list_display ("name",) 1、在models的模型类中添加函数 def hero_count(self,):return sel…
阅读更多...
大学生就业必备的2款软件！助你轻松化身Offer收割机！

大学生就业必备的2款软件！助你轻松化身Offer收割机！

金秋九月&#xff0c;又是一年开学季&#xff0c;随之而来也有许多大学生要开始找工作&#xff0c;但现在的情况是&#xff0c;大部分岗位有很多人同时申请&#xff0c;要想从激烈的竞争中脱颖而出&#xff0c;少不了在求职的每一个环节上下功夫。 最受求职的企业注意的&#…
阅读更多...
ubuntu linux搭建lvgl

ubuntu linux搭建lvgl

记录一下ubuntu linux搭建 lvgl的过程 本地环境:ubuntu 16.04 ubuntu lvgl sdl2 1 获取源码 git clone https://github.com/lvgl/lv_port_linux.git cd lv_port_linux/ git submodule update --init --recursive查看分支: git branch -a 我选择的是9.2(master分支一直在变动…
阅读更多...
DeepWalk【图神经网络论文精读】笔记

DeepWalk【图神经网络论文精读】笔记

链接: DeepWalk【图神经网络论文精读】_哔哩哔哩_bilibili [内容总结::] - deep walk 解决图嵌入问题&#xff1a;将结点压缩成低维向量随机游走&#xff08;类似NLP生成句子&#xff09; 优点与缺点: 相关学习资料 - word2vec 开山必读论文 - DeepWalk 论文阅读 - 代…
阅读更多...
erlang学习：用OTP构建系统4，监控树学习

erlang学习：用OTP构建系统4，监控树学习

监控树学习 之前写的server程序&#xff0c;如果产生了错误&#xff0c;server会立刻停止。本次学习使用了监控树&#xff0c;能够让server崩溃时打印错误信息并重启服务器&#xff0c;能够使服务器正常使用 -module(sellaprime_supervisor). -behaviour(supervisor). -expor…
阅读更多...
iPhone升级iOS 18后遭遇“白苹果”？别怕，这几招教你轻松应对！

iPhone升级iOS 18后遭遇“白苹果”？别怕，这几招教你轻松应对！

在这个科技日新月异的时代&#xff0c;苹果iOS系统的每一次更新都牵动着亿万果粉的心。iOS 18作为苹果最新的操作系统&#xff0c;不仅带来了全新的功能体验&#xff0c;也难免会遇到一些用户反馈的“小插曲”&#xff0c;比如升级后出现的“白苹果”现象。面对这一状况&#x…
阅读更多...
系统编程-UDP

系统编程-UDP

UDP 目录 UDP 引入 使用 UDP 的注意事项 一、单播的流程 -- 一对一 如何实现端口和地址重复绑定 二、广播的流程 -- 一对多 三、组播的流程 -- 多对多 加入组播&#xff0c;需要使用 setsockopt 函数 主要代码 -- 主要是发送方 引入 -- UDP协议的特点 无连接性&…
阅读更多...
24：【stm32】DMA数据搬运

24：【stm32】DMA数据搬运

DMA数据搬运 1、DMA的简介2、STM32中的DMA结构3、案列3.1、将数组DataA中的数据搬运到DataB中3.2、ADC扫描模式DMA 1、DMA的简介 DMA是直接存储器存取&#xff0c;它可以提供外设寄存器和存储器&#xff0c;存储器与存储器之间的高速数据的传输&#xff0c;无需CPU的干预&…
阅读更多...
通配符证书的申请及配置教程

通配符证书的申请及配置教程

在当今高度互联的世界里&#xff0c;网站和应用程序需要确保其数据传输的安全性&#xff0c;以保护用户的隐私和敏感信息不被窃取。为此&#xff0c;HTTPS协议成为了标准配置&#xff0c;而SSL/TLS证书则是实现这一安全协议的重要组成部分。特别地&#xff0c;对于那些运营着多…
阅读更多...
asp.net core web api项目添加自定义中间件

asp.net core web api项目添加自定义中间件

前言 在asp.net core web api项目中&#xff0c;默认提供了很多的中间件&#xff0c;比如访问静态文件中间件UseStaticFiles&#xff0c;跨域配置中间件UseCors&#xff0c;路由中间件UseRouting,身份验证中间件UseAuthentication。 那么如何添加一些自定义的中间件呢。 需求…
阅读更多...
【数据结构】单链表功能的实现

【数据结构】单链表功能的实现

目录 1.链表的概念及结构 2.单链表功能的实现 2.1打印单链表 2.2创建节点 2.3单链表尾插 2.3单链表头插 2.5单链表尾删 2.6单链表头删 2.7单链表的查找 2.8在指定位置之前插入数据 2.9在指定位置之后插入数据 2.10删除pos节点 2.11删除pos之后的节点 2.12销毁链表…
阅读更多...
快专利与慢专利：速度与质量的天平

快专利与慢专利：速度与质量的天平

在当今快速发展的科技时代&#xff0c;专利成为了创新成果的重要保护手段。然而&#xff0c;不同的创新有着不同的节奏&#xff0c;由此也产生了“快专利”与“慢专利”之分。快专利以其迅速的申请和应用&#xff0c;为创新者抢占市场先机&#xff1b;慢专利则凭借深度的研发和…
阅读更多...
Django Admin后台从一个页面同时编辑多个模型

Django Admin后台从一个页面同时编辑多个模型

要从Django Admin后台一个页面同时编辑多个对象&#xff0c;我们需要使用内联。 假设你有一个Category模型&#xff0c;并且需要在Admin后台Category编辑页面&#xff0c;同时编辑Villain模型。你可以在admin.py中使用内联&#xff1a; class VillainInline(admin.StackedInl…
阅读更多...
EDIUS X 10.34.9631 视频剪辑软件 下载 包含安装说明

EDIUS X 10.34.9631 视频剪辑软件 下载 包含安装说明

下载地址(资源制作整理不易&#xff0c;下载使用需付费&#xff0c;不能接受请勿浪费时间下载) 链接&#xff1a;https://pan.baidu.com/s/1P2wKxVcSx5WzAtHXCaAp5A?pwd227i 提取码&#xff1a;227i
阅读更多...
自动控制：鲁棒控制的原理和设计

自动控制：鲁棒控制的原理和设计

自动控制&#xff1a;鲁棒控制的原理和设计 引言 在实际控制系统中&#xff0c;由于模型不确定性、外部扰动、参数变化等因素&#xff0c;传统的控制方法难以保证系统在各种情况下的性能。这时&#xff0c;鲁棒控制&#xff08;Robust Control&#xff09;应运而生。鲁棒控制…
阅读更多...
Vue(十一)默认插槽、具名插槽、作用域插槽

Vue(十一)默认插槽、具名插槽、作用域插槽

文章目录 一、需求二、插槽1. 默认插槽2. 具名插槽3. 作用域插槽 一、需求 有三个Category组件&#xff0c;展示不同的内容。 需求&#xff1a;美食模块需要展示图片&#xff0c;游戏模块还是文字&#xff0c;电影模块展示预告片。 <!--App组件--> <template>&l…
阅读更多...
四款录音神器，你选对了吗？

四款录音神器，你选对了吗？

在快节奏的现代生活中&#xff0c;我们经常需要处理大量的录音文件&#xff0c;如会议记录、采访、讲座等。为了更高效地处理这些信息&#xff0c;录音转文字工具变得越来越重要。本文将为大家介绍四款常用的录音转文字工具&#xff0c;并分享使用体验。 一、福昕PDF转换器 直…
阅读更多...
Matlab 并联双振子声子晶体梁结构带隙特性研究

Matlab 并联双振子声子晶体梁结构带隙特性研究

参考文献&#xff1a;吴旭东,左曙光,倪天心,等.并联双振子声子晶体梁结构带隙特性研究[J].振动工程学报,2017,30(01):79-85. 为使声子晶体结构实现范围更宽的多带隙特性&#xff0c;基于单振子型声子晶体结构弯曲振动带隙频率范围窄的局 限&#xff0c;提出了一种双侧振子布置…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023