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

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

news 2025/12/26 19:59:36

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

质量体系的重要

质量体系是为确保产品、服务或过程质量满足规定要求，由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面： 🏛️ 一、组织架构与职责质量体系明确组织内各部门、岗位的职责与权限，形成层级清晰的管理网络&#xf…...

编程新知 2025/10/24 9:13:44

《通信之道——从微积分到 5G》读书总结

第1章绪论 1.1 这是一本什么样的书通信技术，说到底就是数学。那些最基础、最本质的部分。 1.2 什么是通信通信发送方接收方承载信息的信号解调出其中承载的信息信息在发送方那里被加工成信号（调制） 把信息从信号中抽取出来&am…...

编程新知 2025/12/25 11:06:14

Qt Http Server模块功能及架构

Qt Http Server 是 Qt 6.0 中引入的一个新模块，它提供了一个轻量级的 HTTP 服务器实现，主要用于构建基于 HTTP 的应用程序和服务。功能介绍： 主要功能 HTTP服务器功能： 支持 HTTP/1.1 协议简单的请求/响应处理模型支持 GET…...

编程新知 2025/10/17 21:16:57

Spring AI 入门：Java 开发者的生成式 AI 实践之路

一、Spring AI 简介在人工智能技术快速迭代的今天，Spring AI 作为 Spring 生态系统的新生力量，正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务（如 OpenAI、Anthropic）的无缝对接&…...

编程新知 2025/12/25 18:03:56

NFT模式：数字资产确权与链游经济系统构建

NFT模式：数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命一、确权技术革新：构建可信数字资产基石 1. 区块链底层架构的进化跨链互操作协议：基于LayerZero协议实现以太坊、Solana等公链资产互通，通过零知…...

编程新知 2025/12/11 1:41:28

高防服务器能够抵御哪些网络攻击呢？

高防服务器作为一种有着高度防御能力的服务器，可以帮助网站应对分布式拒绝服务攻击，有效识别和清理一些恶意的网络流量，为用户提供安全且稳定的网络环境，那么，高防服务器一般都可以抵御哪些网络攻击呢？下面…...

编程新知 2025/9/3 19:14:38

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系，以下是深入解析： 门铃FIFO溢出的本质在RapidIO系统中，门铃消息FIFO是硬件控制器内部的缓冲区，用于临时存储接收到的门铃消息（Doorbell Message）。…...

编程新知 2025/11/2 0:32:25

ABAP设计模式之---“简单设计原则(Simple Design)”

“Simple Design”（简单设计）是软件开发中的一个重要理念，倡导以最简单的方式实现软件功能，以确保代码清晰易懂、易维护，并在项目需求变化时能够快速适应。其核心目标是避免复杂和过度设计，遵循“让事情保…...

编程新知 2025/12/14 23:17:22

让回归模型不再被异常值“带跑偏“，MSE和Cauchy损失函数在噪声数据环境下的实战对比

在机器学习的回归分析中，损失函数的选择对模型性能具有决定性影响。均方误差（MSE）作为经典的损失函数，在处理干净数据时表现优异，但在面对包含异常值的噪声数据时，其对大误差的二次惩罚机制往往导致模型参数…...

编程新知 2025/12/12 18:44:23

LLMs 系列实操科普（1）

写在前面： 本期内容我们继续 Andrej Karpathy 的《How I use LLMs》讲座内容，原视频时长 ~130 分钟，以实操演示主流的一些 LLMs 的使用，由于涉及到实操，实际上并不适合以文字整理，但还是决定尽量整理一份笔…...

编程新知 2025/12/21 3:15:21