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

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

news 2025/9/20 5:33:06

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/9/15 5:16:46

Xshell远程连接Kali（默认 | 私钥）Note版

前言:xshell远程连接，私钥连接和常规默认连接任务一开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务任务二修改配置文件 vi /etc/ssh/ssh_config //第一…...

编程新知 2025/9/20 3:34:20

3.3.1_1 检错编码（奇偶校验码）

从这节课开始，我们会探讨数据链路层的差错控制功能，差错控制功能的主要目标是要发现并且解决一个帧内部的位错误，我们需要使用特殊的编码技术去发现帧内部的位错误，当我们发现位错误之后，通常来说有两种解决方案。第一…...

编程新知 2025/9/18 12:57:10

Cloudflare 从 Nginx 到 Pingora：性能、效率与安全的全面升级

在互联网的快速发展中，高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司，近期做出了一个重大技术决策：弃用长期使用的 Nginx，转而采用其内部开发…...

编程新知 2025/8/29 10:31:59

Xen Server服务器释放磁盘空间

disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...

编程新知 2025/7/18 2:39:54

AI病理诊断七剑下天山，医疗未来触手可及

一、病理诊断困局：刀尖上的医学艺术 1.1 金标准背后的隐痛病理诊断被誉为"诊断的诊断"，医生需通过显微镜观察组织切片，在细胞迷宫中捕捉癌变信号。某省病理质控报告显示，基层医院误诊率达12%-15%，专家会诊…...

编程新知 2025/9/18 12:52:50

站群服务器的应用场景都有哪些？

站群服务器主要是为了多个网站的托管和管理所设计的，可以通过集中管理和高效资源的分配，来支持多个独立的网站同时运行，让每一个网站都可以分配到独立的IP地址，避免出现IP关联的风险，用户还可以通过控制面板进行管理功…...

编程新知 2025/9/1 19:01:24

基于Java+VUE+MariaDB实现（Web）仿小米商城

仿小米商城环境安装 nodejs maven JDK11 运行 mvn clean install -DskipTestscd adminmvn spring-boot:runcd ../webmvn spring-boot:runcd ../xiaomi-store-admin-vuenpm installnpm run servecd ../xiaomi-store-vuenpm installnpm run serve 注意：运行前…...

编程新知 2025/9/2 11:57:55

Chromium 136 编译指南 Windows篇：depot_tools 配置与源码获取（二）

引言工欲善其事，必先利其器。在完成了 Visual Studio 2022 和 Windows SDK 的安装后，我们即将接触到 Chromium 开发生态中最核心的工具——depot_tools。这个由 Google 精心打造的工具集，就像是连接开发者与 Chromium 庞大代码库的智能桥梁…...

编程新知 2025/9/19 16:31:56

WPF八大法则：告别模态窗口卡顿

⚙️ 核心问题：阻塞式模态窗口的缺陷原始代码中ShowDialog()会阻塞UI线程，导致后续逻辑无法执行： var result modalWindow.ShowDialog(); // 线程阻塞 ProcessResult(result); // 必须等待窗口关闭根本问题&#xff1a…...

编程新知 2025/9/12 11:51:18