【CSS in Depth 2 精译_081】 13.1:CSS 渐变效果(下)——CSS 径向渐变(13.1.3)+ CSS 锥形渐变(13.1.4)

当前内容所在位置(可进入专栏查看其他译好的章节内容)

  • 第四部分 视觉增强技术 ✔️
  • 【第 13 章 渐变、阴影与混合模式】 ✔️
    • 13.1 渐变 ✔️
      • 13.1.1 使用多个颜色节点(上)
      • 13.1.2 颜色插值方法(中)
      • 13.1.3 径向渐变(下) ✔️
      • 13.1.4 锥形渐变(下) ✔️

文章目录

      • 13.1.3 径向渐变 Radial gradients
      • 13.1.4 锥形渐变 Conic gradients

《CSS in Depth》新版封面

《CSS in Depth》新版封面

译者按
趁着上篇色彩空间插值算法的余兴,把第一小节 CSS 渐变部分全部学完。都是些很好理解的知识点,没什么难度。一起学起来!

13.1.3 径向渐变 Radial gradients

线性渐变应该是您今后会用到的最常见的渐变类型了。此外,CSS 还提供了其他渐变类型,其中一个便是本节要介绍的 径向渐变(radial gradient。径向渐变不是从元素的一端开始并沿着单一方向过渡到另一端,而是从一个点开始,全方位像外扩展。其基本示例如图 13.8 所示。

图 13.8 由某个点向外扩展的径向渐变示意图

【图 13.8 由某个点向外扩展的径向渐变示意图】

径向渐变可通过函数 radial-gradient() 来定义。具体示例如代码清单 13.9 所示。试根据下列代码同步更新本地样式表。

代码清单 13.9 径向渐变基础示例代码

.fade {height: 200px;width: 400px;background-image: radial-gradient(white, blue); /* 从中心处的白色渐变到边缘处的蓝色 */
}

默认情况下,渐变在元素中是从中心开始,并平滑过渡到元素边缘。渐变整体呈椭圆形,它会随元素尺寸大小进行变化(也就是说,对于较宽的元素,其径向渐变也较宽,反之亦然)。

与线性渐变一样,径向渐变同样支持颜色节点(color stops)。您既可以设置多个节点,并利用百分比或长度单位准确定义节点在渐变中的位置;同时也可以像线性渐变一样指定某个色彩空间。

径向渐变函数的第一个参数还可以实现如下高级配置:

  • 可以使用关键字 circle 将径向渐变改为圆形渐变而非椭圆。若同时限定了水平与垂直尺寸,则该设置无效。
  • 通过设置一个或两个长度值来限定渐变的大小尺寸。 若只设置一个值,则渐变会变为给定大小的圆;若设置两个值,则分别表示水平和垂直方向上的尺寸大小。例如 radial-gradient(50px 25px, white, blue) 设置了一个宽 50px、高 25px 的页面渐变效果。
  • 通过指定相对于元素左上角的 xy 坐标来变更径向渐变的中心位置。该坐标需要写到关键字 at 的后面。例如:radial-gradient(at 25px 25px, white, blue)

利用 repeating-radial-gradient() 函数可以重复生成图样,形成同心圆环。其参数与 radial-gradient() 函数中的参数相同。

这些特性大部分可以通过典型示例解释清楚,图 13.9 列举了几个例子以及相应的样式代码。建议您在页面中尝试一下,或者修改为自己的代码。

图 13.9 径向渐变典型示例

【图 13.9 径向渐变典型示例】

在实际开发中,我发觉很少遇到要对径向渐变作任何复杂操作的情况,因为基本的应用形式已经能够满足绝大部分需求。如果想更深入地了解径向渐变的工作原理,可以参考 MDN 相关文档:https://mng.bz/1Gmj。

13.1.4 锥形渐变 Conic gradients

CSS 渐变的最后一个类型为 锥形渐变。相比径向渐变从椭圆的中心向外逐渐改变颜色,锥形渐变则是沿圆形方向围绕椭圆逐渐改变颜色。锥形渐变的一个典型示例如图 13.10 所示。

图 13.10 锥形渐变沿圆形方向改变颜色示意图

【图 13.10 锥形渐变沿圆形方向改变颜色示意图】

锥形渐变可通过 conic-gradient() 函数、或者其重复渐变版本 repeating-conic-gradient() 来定义。该渐变的具体写法如代码清单 13.10 所示。

代码清单 13.10 锥形渐变的基础示例

.fade {height: 200px;width: 400px;background-image: conic-gradient(white, blue);
}

如本例所示,锥形渐变在渐变结束时(即最后一个颜色节点和第一个节点之间)会出现一个突然的过渡效果。这会在两个颜色间产生硬边缘(hard edge)。为此,可以让首尾两个颜色节点均为相同的颜色来解决该问题,例如写作:conic-gradient(white, blue, white)

与线性渐变、径向渐变一样,锥形渐变函数的第一个参数也可以进一步实现如下高级设置:

  • 指定渐变的起始角度,需用 from <angle> 语法。若省略该项,则起始角默认为 0deg,即竖直朝上。例如,conic-gradient(from 90deg, white, blue, white) 将从右侧 90 度位置开始渐变。
  • 指定渐变的中心点坐标,需用 at <x-position> <y-position> 语法。xy 的坐标值是相对于元素左上角测得的偏移量。例如:conic-gradient(at 30px 45px, white, blue, white)。位置参数也可以用长度值或百分比来定义。
  • 指定颜色插值算法,需用 in <color-space> 语法,具体用法与线性渐变、径向渐变相同。例如:conic-gradient(from 90deg in oklch, yellow, blue, yellow)

与其他渐变函数一样,您还可以指定颜色节点的具体位置。位置参数既可以用百分比表示,又可以写为某角度值。建议您在测试页面尝试这些配置项。有关锥形渐变的更多示例,可参考 MDN 的在线文档:https://mng.bz/PZGn。

利用图形界面来配置渐变应该会很有帮助。推荐一个我爱用的网站资源 https://gradient.style/。它支持 OKLCH 颜色语法及 CSS 的这三种渐变类型。

前面演示的大部分示例都用到了色彩对比极为鲜明的颜色组合,这么做旨在凸显渐变的视觉效果,让渐变的行为特征清晰可辨;不过在实际的项目开发中,使用对比度较低的颜色组合效果往往会更好。

比如,不要从白色直接过渡到黑色,可以从白色渐变到浅灰色;或者在两种相仿的蓝色之间设置渐变。这样不会让用户产生不适感。在某些特定场合下,用户甚至都察觉不到渐变的存在,但依然可以给页面带来些许立体感。后面我会展示一些关于渐变的实际应用案例。不过在那之前,我们先来看看阴影。



关于《CSS in Depth》(中译本书名《深入解析 CSS》)

第 1 版第 2 版
读者评分原版:4.7(亚马逊);中文版:9.3(豆瓣)原版:5.0(亚马逊);中文版:暂无,待出版
出版时间原版:2018 年 3 月;中文版:2020 年 4 月原版:2024 年 7 月;中文版:暂无,待出版
原价原版:$44.99;中文版:¥139.00原版:$59.99;中文版:暂无,待出版
现价原版:$36.49;中文版:¥52.54 起步原版:$52.09;中文版:暂无,待出版
原版国内预订起步价 ¥461.00起步价 ¥750.00

本专栏为该书第 2 版高分译文专栏,全网首发,精译精校,持续更新,计划今年内完成全书翻译,敬请期待!!!

目前已完结的章节(可进入本专栏查看详情,连载期间完全免费):

  • 第一章 层叠、优先级与继承(已完结)
    • 1.1 层叠
    • 1.2 继承
    • 1.3 特殊值
    • 1.4 简写属性
    • 1.5 CSS 渐进式增强技术
    • 1.6 本章小结
  • 第二章 相对单位(已完结)
    • 2.1 相对单位的威力
    • 2.2 em 与 rem
    • 2.3 告别像素思维
    • 2.4 视口的相对单位
    • 2.5 无单位的数值与行高
    • 2.6 自定义属性
    • 2.7 本章小结
  • 第三章 文档流与盒模型(已完结)
    • 3.1 常规文档流
    • 3.2 盒模型
    • 3.3 元素的高度
    • 3.4 负的外边距
    • 3.5 外边距折叠
    • 3.6 容器内的元素间距问题
    • 3.7 本章小结
  • 第四章 Flexbox 布局(已完结)
    • 4.1 Flexbox 布局原理
    • 4.2 弹性子元素的大小
    • 4.3 弹性布局的方向
    • 4.4 对齐、间距等细节处
    • 4.5 本章小结
  • 第五章 网格布局(已完结)
    • 5.1 构建基础网格
    • 5.2 网格结构剖析 (上)
      • 5.2.1 网格线的编号(下)
      • 5.2.2 网格与 Flexbox 配合(下)
    • 5.3 两种替代语法
      • 5.3.1 命名网格线
      • 5.3.2 命名网格区域
    • 5.4 显式网格与隐式网格(上)
      • 5.4.1 添加变化 (中)
      • 5.4.2 让网格元素填满网格轨道(下)
    • 5.5 子网格(全新增补内容)
    • 5.6 对齐相关的属性
    • 5.7 本章小结
  • 第六章 定位与堆叠上下文(已完结)
    • 6.1 固定定位
      • 6.1.1 创建一个固定定位的模态对话框
      • 6.1.2 在模态对话框打开时防止屏幕滚动
      • 6.1.3 控制定位元素的大小
    • 6.2 绝对定位
      • 6.2.1 关闭按钮的绝对定位
      • 6.2.2 伪元素的定位问题
    • 6.3 相对定位
      • 6.3.1 创建下拉菜单(上)
      • 6.3.2 创建 CSS 三角形(下)
    • 6.4 堆叠上下文与 z-index
      • 6.4.1 理解渲染过程与堆叠顺序(上)
      • 6.4.2 用 z-index 控制堆叠顺序(上)
      • 6.4.3 深入理解堆叠上下文(下)
    • 6.5 粘性定位
    • 6.6 本章小结
  • 第七章 响应式设计(已完结)
    • 7.1 移动端优先设计原则(上篇)
      • 7.1.1 创建移动端菜单(下篇)
      • 7.1.2 给视口添加 meta 标签(下篇)
    • 7.2 媒体查询(上篇)
      • 7.2.1 深入理解媒体查询的类型(上篇)
      • 7.2.2 页面断点的添加(中篇)
      • 7.2.3 响应式列的添加(下篇)
    • 7.3 流式布局
    • 7.4 响应式图片
    • 7.5 本章小结
  • 第八章 层叠图层及其嵌套
    • 8.1 用 layer 图层来操控层叠规则(上篇)
      • 8.1.1 图层的定义(上篇)
      • 8.1.2 图层的顺序与优先级(下篇)
      • 8.1.3 revert-layer 关键字(下篇)
    • 8.2 层叠图层的推荐组织方案
    • 8.3 伪类 :is() 和 :where() 的用法
    • 8.4 CSS 嵌套的使用
      • 8.4.1 嵌套选择器的使用
      • 8.4.2 深入理解嵌套选择器
      • 8.4.3 媒体查询及其他 @规则 的嵌套
    • 8.5 本章小结
  • 第九章 CSS 的模块化与作用域
    • 9.1 模块的定义
      • 9.1.1 模块和全局样式
      • 9.1.2 一个简单的 CSS 模块
      • 9.1.3 模块的变体
      • 9.1.4 多元素模块
    • 9.2 将模块组合为更大的结构
      • 9.2.1 模块中多个职责的拆分
      • 9.2.2 模块的命名
    • 9.3 CSS 的作用域
      • 9.3.1 CSS 作用域的就近原则
      • 9.3.2 划定作用域的边界
      • 9.3.3 CSS 中的隐式作用域
      • 9.3.4 关于 CSS 作用域与层叠图层
    • 9.4 CSS 模式库
    • 9.5 本章小结
  • 第十章 CSS 容器查询
    • 10.1 容器查询的一个简单示例
      • 10.1.1 容器尺寸查询的用法
    • 10.2 深入理解容器
      • 10.2.1 容器的类型
      • 10.2.2 容器的名称
      • 10.2.3 容器与模块化 CSS
    • 10.3 与容器相关的单位
    • 10.4 容器样式查询的用法
      • 10.4.1 将模块与所在容器解耦
      • 10.4.2 减少重复代码
    • 10.5 本章小结
  • 第 11 章 颜色与对比
    • 11.1 通过对比进行交流
      • 11.1.1 模式的建立
      • 11.1.2 还原设计稿
    • 11.2 颜色的定义
      • 11.2.1 色域与色彩空间
      • 11.2.2 CSS 颜色表示法(RGB、Hex、HSL、HWB、LAB/OKLAB、LCH/OKLCH)
    • 11.3 利用 OKLCH 处理颜色(上篇)
      • 11.3.4 从页面其他颜色衍生出新颜色(下篇)
    • 11.4 思考字体颜色的对比效果
    • 11.5 本章小结
  • 第 12 章 CSS 排版与间距
    • 12.1 间距设置
      • 12.1.1 使用 em 还是 px
      • 12.1.2 对行高的深入思考
      • 12.1.3 行内元素的间距设置
    • 12.2 Web 字体
    • 12.3 谷歌字体
    • 12.4 @font-face 的工作原理
      • 12.4.1 字体格式与回退处理
      • 12.4.2 同一字型的多种变体形式
    • 12.5 性能因素考量
      • 12.5.1 font-display 属性解析
      • 12.5.2 可变字体的用法
    • 12.6 调整字间距,提升可读性
      • 12.6.1 正文的字间距
      • 12.6.2 标题、小元素和间距
    • 12.7 本章小结
  • 附录
    • 附录A:CSS 选择器参考
    • 附录B:CSS 预处理器简介

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

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

相关文章

商务礼仪学习笔记

时间,场合,地点 女士: 1. 着装(裙装套装,最短不能超过膝盖一拳,裙子形状直通,颜色简单不能花里胡哨,上下颜色不能超过三种,深灰深蓝;上下颜色,装饰,面料统一;丝袜不要过于花,肉色透明比较推荐) 2. 妆容和发型(经过搭理,不要毛躁; 肤色保持一致,均衡;腮红…

ubuntu 用 ss-tproxy的最终网络结构

1、包含了AD广告域名筛选 2、Ss-tproxy 国内国外地址分类 3、chinadns-ng解析 4、透明网关 更多细节看之前博客 ubuntu 用ss-TPROXY实现透明代理&#xff0c;基于TPROXY的透明TCP/UDP代理,在 Linux 2.6.28 后进入官方内核。ubuntu 用 ss-tproxy的内置 DNS 前挂上 AdGuardHome…

iOS swift开发系列--如何给swiftui内容视图添加背景图片显示

我需要在swiftui项目中显示背景图&#xff0c;有两种方式&#xff0c;一种是把图片拖入asset资源中&#xff0c;另外一种是直接把图片放在源码目录下。采用第一种方式&#xff0c;直接把图片拖到资源目录&#xff0c;但是swiftui项目没有弹出&#xff0c; “Copy items if need…

BUUCTF Pwn [HarekazeCTF2019]baby_rop2 题解

下载 得到两个文件 checksec 64位 拖入IDA64 查看main函数 看到给了个libc说明这题是ret2libc题 这里的打印函数是printf 所以利用printf函数的plt输出真实地址got 但printf的got好像不行 所以换成了read的got 因为这是64位程序 所以用寄存器传参&#xff1b;又因为printf得…

语音识别失败 chrome下获取浏览器录音功能,因为安全性问题,需要在localhost或127.0.0.1或https下才能获取权限

环境&#xff1a; Win10专业版 谷歌浏览器 版本 131.0.6778.140&#xff08;正式版本&#xff09; &#xff08;64 位&#xff09; 问题描述&#xff1a; 局域网web语音识别出现识别失败 chrome控制台出现下获取浏览器录音功能&#xff0c;因为安全性问题&#xff0c;需要在…

【前端知识】Javascript进阶-类和继承

文章目录 概述一、类&#xff08;Class&#xff09;二、继承&#xff08;Inheritance&#xff09; 三、继承的实现方式作用一、类和作用二、继承和作用 概述 当然可以&#xff0c;以下是对JavaScript中类和继承的详细介绍&#xff1a; 一、类&#xff08;Class&#xff09; 定…

前端搭建企业级项目的具体步骤?

‌前端搭建企业级项目的具体步骤如下‌&#xff1a; ‌确定项目技术栈和规划项目结构‌&#xff1a;首先&#xff0c;确定使用的前端框架&#xff0c;如Vue.js&#xff0c;并规划项目的目录结构&#xff0c;包括src、components、routes、store等‌。 ‌准备开发环境‌&#x…

Less和SCSS,哪个更好用?

前言 Less 和 SCSS 都是流行的 CSS 预处理器&#xff0c;它们的目的都是扩展 CSS 的功能&#xff0c;使样式表更具组织性、可维护性和可重用性。虽然它们有许多相似之处&#xff0c;但在语法、特性和工作方式上也存在一些差异。 Less Less 是一种动态样式表语言&#xff0c;…

【第三节】Git 基本操作指南

目录 前言 一、获取与创建项目 1.1 git init 1.2 git clone 二、基本快照操作 2.1 git add 2.2 git status 2.3 git diff 2.4 git commit 2.5 git reset HEAD 三、 文件管理 3.1 git rm 3.2 git mv 四、 总结 前言 本文将详细介绍 Git 的基本操作&#xff0c;包括…

【Graylog】索引别名deflector的异常处理和索引分片数限制解除

索引别名deflector的异常处理 官方推荐处理步骤 Stop all Graylog nodes (OPTIONAL) If you want to keep the already ingested messages, reindex them into the Elasticsearch index with the greatest number, e. g. graylog_23 if you want to fix the deflector graylo…

PyTorch 2.0 以下版本中设置默认使用 GPU 的方法

PyTorch 2.0 以下版本中设置默认使用 GPU 的方法 在 PyTorch 2.0以下版本中&#xff0c;默认情况下仍然是使用 CPU 进行计算&#xff0c;除非明确指定使用 GPU。在 PyTorch 2.0 以下版本中&#xff0c;虽然没有 torch.set_default_device 的便捷方法&#xff0c;但可以通过显式…

【一本通】输入两个不同的数,通过指针对两个数进行相加和相乘

【一本通】输入两个不同的数&#xff0c;通过指针对两个数进行相加和相乘 C语言代码C代码Java代码 &#x1f490;The Begin&#x1f490;点点关注&#xff0c;收藏不迷路&#x1f490; 输入两个不同的数&#xff0c;通过指针对两个数进行相加和相乘&#xff0c;并输出。 输入 …

X.game解析柚子币提升速效双向利好和年中历史新低原因

柚子币最新消息&#xff0c;币安宣布将于2024年9月25日21:00左右暂停柚子币网络上的代币存取业务&#xff0c;以全力支持即将到来的柚子币网络升级和硬分叉&#xff0c;这一消息为柚子币的未来发展增添了新的期待和变数。 除了速度的提升&#xff0c;Spring1.0还带来了诸多技术…

redis集群安装部署 redis三主三从集群

redis集群安装部署 redis三主三从集群 1、下载redis2、安装redis集群 三主三从3、配置redis开机自启动3.1、建立启动脚本3.2、复制多份redis启动脚本给集群使用3.3、添加可执行权限3.4、配置开机自启动 1、下载redis 本次redis安装部署选择当前最新的稳定版本7.4.1 下载链接: …

数据结构,链表的简单使用

任意位置删除&#xff1a; void Any_Del(LinkListPtr h,int a)//任意删 {if(NULLh||a>h->len){printf("删除失败");}LinkListPtr ph;for(int i0;i<a-1;i){pp->next;}LinkListPtr p2p;p2p2->next;p->nextp->next->next;free(p2);p2NULL;h-&g…

Servlet容器来扫描指定包中的类 找到带有WebServlet注解的类

项目框架如上图 myweb下边三个类 package com.qcby.tomcat.myweb;import com.qcby.tomcat.webServlet.WebServlet;WebServlet(urlPatterns {"MyFirstServlet"}) public class MyFirstServlet {}package com.qcby.tomcat.myweb;import com.qcby.tomcat.webServlet.W…

clickhouse 查询优化思路

最重要的是要学会看懂explain &#xff0c;尤其是下推创建表时&#xff0c;可以选择表为分布式表。多个表join &#xff0c;创建表时根据join 字段,进行分片&#xff0c;让数据在同一个节点进行join &#xff0c;提高join 效率。多个表join , 通过创建物化视图的方式&#xff0…

两数之和(Hash表)

优质博文&#xff1a;IT-BLOG-CN 一、题目 给定一个整数数组nums和一个整数目标值target&#xff0c;请你在该数组中找出"和"为目标值target的那两个整数&#xff0c;并返回它们的数组下标。 你可以假设每种输入只会对应一个答案。但是&#xff0c;数组中同一个元…

C++8--赋值运算符重载

1.运算符重载 C引入运算符的目的是为了增强代码的可读性。运算符重载是具有特殊函数名的函数&#xff0c;也具有其返回值类型&#xff0c;函数名字以及参数列表&#xff0c;其返回值类型与参数列表与普通的函数相似。 函数名字为&#xff1a;关键字operator后面接需要重载的运算…

P1255 数楼梯

刚开始使用暴力进行求解&#xff0c;结果发现这是一道考验高精度的题目&#xff0c;后来用高精度的方法&#xff0c;甚至使用到了容器&#xff0c;结果还不如暴力求解的60分&#xff0c;后来看了题解&#xff0c;有一个非常好的思路&#xff0c;即体现了高精度求和&#xff0c;…