当前位置：首页 > news >正文

【前端技巧】CSS常用知识碎片（九）

news 2026/2/9 2:11:28

CSS常用知识碎片（九）

mask-image属性

带有半透明的PNG图像的遮罩效果

.mask-image {mask: no-repeat center / contain;mask-image: url(bird.png);
}

SVG图形遮罩效果

.mask-image {mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 3232'%3E%3Cpath d='M28.0275.161l-17.017 17.017-7.007-7.007-3.003 3.003 10.010 10.010 20.020-20.020z'%3E%3C/path%3E%3C/svg%3E");mask-repeat: no-repeat;
}

用渐变图像实现遮罩效果

.mask-image {width: 256px; height: 192px;mask-image: radial-gradient(600px 80px at top, transparent150px, black 152px 1000px,transparent 0)，radial-gradient(600px 80px at bottom, transparent 150px,black 152px 1000px,transparent 0);
}

CSS遮罩的一些经典应用示例

CSS遮罩实现的渐变小图标效果

/* 纯色 */
.icon-delete {display: inline-block;width: 20px; height: 20px;/* 背景色设为当前color的颜色 */background-color: currentColor;/* 小图标图像作为遮罩图像使用 */--mask: url(delete.png) no-repeat center / 1.125em 1.125em;-webkit-mask: var(--mask);mask: var(--mask);
}
/* 渐变色 */
.icon-delete {background: linear-gradient(deepskyblue, deeppink);mask: url(delete.png) no-repeat center;
}

倒影效果

-webkit-box-reflect: below;

`scroll-behavior: smooth` 平滑切换容器

.box {scroll-behavior: smooth;overflow: hidden;
}

可在CSS重置时，统一对页面滚动做平滑处理

html, body { scroll-behavior:smooth; }

利用 `overscroll-behavior: contain` 默认的滚动溢出行为只会表现在当前元素的内部（例如“反弹”效果或刷新），不会对相邻的滚动区域进行滚动。

overscroll-behavior: contain;

利用 `overflow-anchor:auto` 滚动锚定,优化局部元素滚动效果

overflow-anchor: auto;

CSS Scroll Snap

利用 CSS Scroll Snap 让页面滚动停留在你希望用户关注的重点区域

<body><div class="scroll-x"><img src="1.jpg"><img src="2.jpg"><img src="3.jpg"><img src="4.jpg"></div>
</body>
<style>
.scroll-x {max-width: 414px; height: 420px;scroll-snap-type: x mandatory;white-space: nowrap;overflow: auto;
}
.scroll-x img {scroll-snap-align: center;
}
</style>

scroll-snap-type属性

作用：确定定位方式是水平滚动定位，还是垂直滚动定位。

属性值	释义
none	默认值，表示滚动时忽略捕捉点，也就是我们平时使用的滚动
x	捕捉水平定位点
y	捕捉垂直定位点
block	捕捉和块状元素排列一个滚动方向的定位点，默认文档流下指的就是垂直轴
inline	捕捉和内联元素排列一个滚动方向的定位点，默认文档流下指的就是水平轴
both	横轴、纵轴都捕捉
mandatory	表示“强制”，为可选参数。强制定位，也就是如果存在有效的定位点位置，则滚动容器必须在滚动结束时进行定位
proximity	表示“大约”，为可选参数。可能会定位，类似这种表意模糊的词是最难理解的，这个值的作用表现为让浏览器自己判断要不要定位。

scroll-snap-stop属性

作用：是否允许滚动容器忽略捕获位置。

属性值	释义
normal	默认值，可以忽略捕获位置
always	不能忽略捕获位置，且必须定位到第一个捕获元素的位置

scroll-snap-align属性

作用：在滚动容器子元素上的，表示捕获点是上边缘、下边缘或中间位置。

属性值	释义
none	默认值，不定义位置
start	起始位置对齐，如垂直滚动、子元素和容器同上边缘对齐
end	结束位置对齐，如垂直滚动、子元素和容器同下边缘对齐
center	居中对齐，子元素中心和滚动容器中心一致

使用cater-color属性改变插入光标的颜色

input {color: #333;caret-color: red;
}

user-select属性

禁止图文被选中

body {-webkit-user-select: none;user-select: none;
}

单击元素选中所有图文

section {user-select: all;
}

签名动画效果

path {stroke-dasharray: 1000;stroke-dashoffset: 1000;animation: dash 5s linear infinite;
}
@keyframes dash {to {stroke-dashoffset: 0;}
}

进度圆环动画效果

<svg width="440" height="440" viewBox="0 0 440 440"><defs><linearGradient x1="1" y1="0" x2="0" y2="0" id="gradient"><stop offset="0%" stop-color="#e52c5c"></stop><stop offset="100%" stop-color="#ab5aea"></stop></linearGradient></defs><circle cx="220" cy="220" r="170" class="circle-track"></circle><circle cx="220" cy="220" r="170" transform="rotate(-90 220 220)" class="circle-bar"></circle><text class="text" x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">0%</text>
</svg>
circle {
stroke-width: 50px;
fill: none;
stroke-dasharray: 1069px;circle {stroke-width: 50px;fill: none;stroke-dasharray: 1069px;
}
.circle-track {stroke: #f0f1f5;
}
.circle-bar {stroke-dashoffset: 1069px;stroke: url(#gradient);
}
.text {font-size: 50px;
}circle {stroke-width: 50px;fill: none;stroke-dasharray: 1069px;
}
.circle-track {stroke: #f0f1f5;
}
.circle-bar {stroke-dashoffset: 1069px;stroke: url(#gradient);
}
.text {font-size: 50px;
}
/* 灰色进度槽 */
stroke: #f0f1f5;
}
/* 渐变进度条 */
.circle-bar {
/* stroke-dashoffset慢慢变小，进度条就会慢慢出现 */
stroke-dashoffset: 1069px;
stroke: url(#gradient);
}

【前端技巧】CSS常用知识碎片（九）

CSS常用知识碎片（九） mask-image属性带有半透明的PNG图像的遮罩效果 .mask-image {mask: no-repeat center / contain;mask-image: url(bird.png); }SVG图形遮罩效果 .mask-image {mask-image: url("data:image/svgxml,%3Csvg viewBox0 0 3232…...

编程日记 2023/7/16 1:54:29

SQL 上升的温度

197 上升的温度 SQL架构表： Weather ---------------------- | Column Name | Type | ---------------------- | id | int | | recordDate | date | | temperature | int | ---------------------- id 是这个表的主键该表包含特定日期的温度信息编写一个 SQL …...

编程日记 2023/7/16 1:21:08

Matlab实现最优化（附上多个完整仿真源码）

最优化是一种寻找最优解的数学方法，它在各个领域都有广泛的应用。在Matlab中，有多种工具箱和函数库可以用来实现最优化，下面我们来介绍一下如何用Matlab实现最优化。 1. 定义目标函数在开始最优化之前，需要定义一个目标函数。目…...

编程日记 2023/7/16 0:47:47

es下载历史的tar文件

第一步进入官网找到历史版本第二步复制历史版本名称组合成下面的链接直接get访问下载。如下链接所示只需要修改7.3.0这个版本号 https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-7.3.0-linux-x86_64.tar.gz...

编程日记 2023/7/16 0:14:25

顺畅下载chatglm2-6b的模型文件

不管是从huggingface下，git下，wget下，都可能卡。用推荐的清华源的url下，也卡，但url转换之后的，在windows下不了。但是在linux上就几十兆每秒 wget https://cloud.tsinghua.edu.cn/seafhttp/files/0d8b273…...

编程日记 2023/7/15 23:41:04

go语言 socket: too many open files 错误分析

问题背景： 近期针对老的PHP接口做了迁移重构，用golang重新实现，在上线之前，测试进行了压测，压测的量级为：200请求/s, 连续请求10s，发现接口出现大量超时错误，查看日志发现错误信息为…...

编程日记 2023/7/15 23:07:43

分布式搜索--elasticsearch

一、初识 elasticsearch 1. 了解 ES ① elasticsearch 是一款非常强大的开源搜索引擎，可以帮助我们从海量数据中快速找到需要的内容 ② elasticsearch 结合 kibana、Logstash、 Beats，也就是 elastic stack (ELK)，被广泛应用在日志数据分…...

编程日记 2023/7/15 22:34:22

UE5《Electric Dreams》项目PCG技术解析之 PCGCustomNodes详解（一）

《Electric Dreams》项目中提供了一些自定义节点和子图（文件位置:“/Content/PCG/Assets/PCGCustomNodes”），这些节点和子图在《Electric Dreams》被广泛使用，对于理解《Electric Dreams》非常重要，而且它们可以直接移…...

编程日记 2023/7/15 22:01:01

500万PV的网站需要多少台服务器？

1. 衡量业务量的指标衡量业务量的指标项有很多，比如，常见Web类应用中的PV、UV、IP。而比较贴近业务的指标项就是大家通常所说的业务用户数。但这个用户数比较笼统，其实和真实访问量有比较大的差距，所以为了更贴近实际业务量及压力…...

编程日记 2023/7/15 21:27:40

拖动排序功能的实现 - 使用HTML、CSS和JavaScript

引言在现代Web应用程序中，拖动排序是一种常见的用户界面交互方式，它允许用户通过拖动元素来重新排列列表或项目的顺序。本文将介绍如何使用HTML、CSS和JavaScript来实现手动拖动排序功能。一、HTML结构首先，我们需要定义一个列表&#…...

编程日记 2023/7/15 20:54:18

【STM32MP135 - ST官方源码移植】第三章：OPTEE源码移植教程

STM32MP135 OPTEE源码移植教程一、解压optee的源码压缩包二、拷贝新的设备树文件三、修改Makefile.sdk文件（1）增加stm32mp135d-atk设备树编译（2）修改编译器为arm-none-linux-gnueabihf（3）使用buildroot工具…...

编程日记 2023/7/15 20:20:57

云主机安全-私有密钥安全认证

场景描述云主机凭借其性价比高、生配扩容便利、运维便捷、稳定性高等优势深受用户青睐，越来越多的企业开始租用云主机，将自己的服务器、业务系统等搭建或存储到云主机上。用户痛点用户租用或托管的云主机，运维端口（远程桌面&…...

编程日记 2023/7/15 19:47:36

《Web安全基础》02. 信息收集

web 1：CDN 绕过1.1：判断是否有 CDN 服务1.2：常见绕过方法1.3：相关资源 2：网站架构3：WAF4：APP 及其他资产5：资产监控本系列侧重方法论，各工具只是实现目标的载体。命令与…...

编程日记 2023/7/15 19:14:14

ffmpeg根据原始视频的帧率进行提取视频帧

直接上代码，自己编写的。。。有问题可以提安装教程看这个：https://blog.csdn.net/m0_61497715/article/details/129817641 去官网下个最新的ffmpeg，解压到随便的目录，上级目录最好不要用中文； 然后去设置环境变量&am…...

编程日记 2023/7/15 18:40:53

从零搭建秒杀服务

1. 前言目的：该项目只用于技术交流，不用于过多商业用途。适用：可用于简历亮点、毕业答辩等。 2. 项目成果 2.1 秒杀主页包含5个功能点： ①、Product Name：秒杀商品名称 ②、Product Image：秒杀商…...

编程日记 2023/7/15 18:07:32

数据库应用：CentOS 7离线安装PostgreSQL

目录一、理论 1.PostgreSQL 2.PostgreSQL离线安装 3.PostgreSQL初始化 4.PostgreSQL登录操作二、实验 1.CentOS 7离线安装PostgreSQL 2.登录PostgreSQL 3.Navicat连接PostgreSQL 三、总结一、理论 1.PostgreSQL （1）简介 PostgreSQL 是一个…...

编程日记 2023/7/15 17:34:10

【PHP面试题42】Laravel依赖注入实现的原理是怎么样的

文章目录一、前言二、什么是依赖注入三、Laravel依赖注入的实现原理3.1 Laravel依赖注入的实现原理：3.2 Laravel依赖注入的代码示例四、总结一、前言本文已收录于PHP全栈系列专栏：PHP面试专区。计划将全覆盖PHP开发领域所有的面试题，对标…...

编程日记 2023/7/15 17:00:49

如何在本地组策略编辑器中启用或禁用剪贴板历史记录

复制粘贴是我们大家都会做的事情，可能一天要做多次。但是，如果你需要一次又一次地复制同样的几件事，你该怎么办？如何在设备上复制内容？从Windows 10版本17666开始，微软正在解决这一问题，并将剪贴板提升到一个新的水平，只需按下Win+V，你将获得全新的剪贴板体验。你…...

编程日记 2023/7/15 16:27:27

如何与ChatGPT愉快地聊天

原文链接：https://mp.weixin.qq.com/s/ui-O4CnT_W51_zqW4krtcQ 人工智能的发展已经走到了一个新的阶段，在这个阶段，人工智能可以像人一样与我们进行深度的文本交互。其中，OpenAI的ChatGPT是一个具有代表性的模型。然而&#xff0…...

编程日记 2023/7/15 15:54:06

使用Gradio库进行交互式数据可视化：Timeseries模块介绍

❤️觉得内容不错的话，欢迎点赞收藏加关注😊😊😊，后续会继续输入更多优质内容❤️ 👉有问题欢迎大家加关注私戳或者评论（包括但不限于NLP算法相关，linux学习相关，读研读博…...

编程日记 2023/7/15 15:20:45

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中，选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南： ⚖️ 核心权衡维度维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

编程新知 2025/8/3 11:17:37

在Ubuntu中设置开机自动运行（sudo）指令的指南

在Ubuntu系统中，有时需要在系统启动时自动执行某些命令，特别是需要 sudo权限的指令。为了实现这一功能，可以使用多种方法，包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法，并提供…...

编程新知 2025/12/23 11:20:24

数据库分批入库

今天在工作中，遇到一个问题，就是分批查询的时候，由于批次过大导致出现了一些问题，一下是问题描述和解决方案： 示例： // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...

编程新知 2026/1/8 11:38:36

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具，可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板，允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板，并通…...

编程新知 2026/2/6 1:00:25

AspectJ 在 Android 中的完整使用指南

一、环境配置（Gradle 7.0 适配） 1. 项目级 build.gradle // 注意：沪江插件已停更，推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...

编程新知 2025/7/7 22:33:57

Device Mapper 机制

Device Mapper 机制详解 Device Mapper（简称 DM）是 Linux 内核中的一套通用块设备映射框架，为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程，并配以详细的…...

编程新知 2025/12/14 13:11:33

SAP学习笔记 - 开发26 - 前端Fiori开发 OData V2 和 V4 的差异 (Deepseek整理）

上一章用到了V2 的概念，其实 Fiori当中还有 V4，咱们这一章来总结一下 V2 和 V4。 SAP学习笔记 - 开发25 - 前端Fiori开发 Remote OData Service(使用远端Odata服务)，代理中间件（ui5-middleware-simpleproxy）-CSDN博客…...

编程新知 2026/2/3 8:20:06

NXP S32K146 T-Box 携手 SD NAND（贴片式TF卡）：驱动汽车智能革新的黄金组合

在汽车智能化的汹涌浪潮中，车辆不再仅仅是传统的交通工具，而是逐步演变为高度智能的移动终端。这一转变的核心支撑，来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒（T-Box）方案：NXP S32K146 与…...

编程新知 2026/1/24 14:43:35

Linux 中如何提取压缩文件？

Linux 是一种流行的开源操作系统，它提供了许多工具来管理、压缩和解压缩文件。压缩文件有助于节省存储空间，使数据传输更快。本指南将向您展示如何在 Linux 中提取不同类型的压缩文件。 1. Unpacking ZIP Files ZIP 文件是非常常见的，要在 …...

编程新知 2026/2/1 5:38:25

根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的----NTFS源代码分析--重要

根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的第一部分： 0: kd> g Breakpoint 9 hit Ntfs!ReadIndexBuffer: f7173886 55 push ebp 0: kd> kc # 00 Ntfs!ReadIndexBuffer 01 Ntfs!FindFirstIndexEntry 02 Ntfs!NtfsUpda…...

编程新知 2025/8/27 0:09:05