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

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

news 2026/2/9 9:57:31

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

挑战杯推荐项目

“人工智能”创意赛 - 智能艺术创作助手：借助大模型技术，开发能根据用户输入的主题、风格等要求，生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用，帮助艺术家和创意爱好者激发创意、提高创作效率。 - 个性化梦境…...

编程新知 2025/11/6 5:46:16

连锁超市冷库节能解决方案：如何实现超市降本增效

在连锁超市冷库运营中，高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术，实现年省电费15%-60%，且不改动原有装备、安装快捷、…...

编程新知 2025/11/30 16:55:29

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器，其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机（Virtual Host）。 1. 简介 Nginx 使用 server_name 指令来确定…...

编程新知 2025/9/6 16:47:17

视频字幕质量评估的大规模细粒度基准

大家读完觉得有帮助记得关注和点赞！！！ 摘要视频字幕在文本到视频生成任务中起着至关重要的作用，因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型（VLMs）在字幕生成方面…...

编程新知 2026/2/6 9:24:15

工业自动化时代的精准装配革新：迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者迁移科技成立于2017年，作为行业领先的3D工业相机及视觉系统供应商，累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成，通过稳定、易用、高回报的AI3D视觉系统，为汽车、新能源、金属制造等行…...

编程新知 2025/11/25 4:59:47

【OSG学习笔记】Day 16: 骨骼动画与蒙皮（osgAnimation）

骨骼动画基础骨骼动画是 3D 计算机图形中常用的技术，它通过以下两个主要组件实现角色动画。骨骼系统 (Skeleton)：由层级结构的骨头组成，类似于人体骨骼蒙皮 (Mesh Skinning)：将模型网格顶点绑定到骨骼上，使骨骼移动…...

编程新知 2026/2/1 5:42:50

【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制

使用 NginxLua 实现基于 IP 的访问频率限制在高并发场景下，限制某个 IP 的访问频率是非常重要的，可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案，使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...

编程新知 2025/10/22 6:06:44

为什么要创建 Vue 实例

核心原因：Vue 需要一个「控制中心」来驱动整个应用你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为，将它们变成一个活的、可交互的应用**。没有这个实例，你的代码只是一堆静态的 HTML、JavaScript 变量和函数，无法「活」起来。 …...

编程新知 2026/2/9 7:06:29

通过MicroSip配置自己的freeswitch服务器进行调试记录

之前用docker安装的freeswitch的，启动是正常的， 但用下面的Microsip连接不上主要原因有可能一下几个 1、通过下面命令可以看 [rootlocalhost default]# docker exec -it freeswitch fs_cli -x "sofia status profile internal"Name …...

编程新知 2026/2/6 14:23:05

Elastic 获得 AWS 教育 ISV 合作伙伴资质，进一步增强教育解决方案产品组合

作者：来自 Elastic Udayasimha Theepireddy (Uday), Brian Bergholm, Marianna Jonsdottir 通过搜索 AI 和云创新推动教育领域的数字化转型。我们非常高兴地宣布，Elastic 已获得 AWS 教育 ISV 合作伙伴资质。这一重要认证表明，Elastic 作为 …...

编程新知 2026/2/7 16:38:17