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

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

news 2025/11/11 3:00:16

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

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备环境搭建： 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号项目创建： File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

编程新知 2025/9/5 12:16:40

微信小程序 - 手机震动

一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码注：文档 https://developers.weixin.qq…...

编程新知 2025/11/8 4:39:49

【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪宝可梦GO游戏自组网系统

目录游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性宝可梦玩法融合设计游戏构想要素1. 地图探索（基于物理空间广播范围）2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法安全性设计技术选…...

编程新知 2025/10/25 21:41:56

OPENCV形态学基础之二腐蚀

一.腐蚀的原理 (图1) 数学表达式：dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一，腐蚀跟膨胀属于反向操作，膨胀是把图像图像变大，而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。腐蚀…...

编程新知 2025/11/7 20:03:14

laravel8+vue3.0+element-plus搭建方法

创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...

编程新知 2025/10/15 0:25:46

DingDing机器人群消息推送

文章目录 1 新建机器人2 API文档说明3 代码编写 1 新建机器人点击群设置下滑到群管理的机器人，点击进入添加机器人选择自定义Webhook服务点击添加设置安全设置，详见说明文档成功后，记录Webhook 2 API文档说明点击设置说明查看自…...

编程新知 2025/11/8 6:45:40

省略号和可变参数模板

本文主要介绍如何展开可变参数的参数包 1.C语言的va_list展开可变参数 #include <iostream> #include <cstdarg>void printNumbers(int count, ...) {// 声明va_list类型的变量va_list args;// 使用va_start将可变参数写入变量argsva_start(args, count);for (in…...

编程新知 2025/7/9 0:26:24

springboot 日志类切面，接口成功记录日志，失败不记录

springboot 日志类切面，接口成功记录日志，失败不记录自定义一个注解方法 import java.lang.annotation.ElementType; import java.lang.annotation.Retention; import java.lang.annotation.RetentionPolicy; import java.lang.annotation.Target;/***…...

编程新知 2025/11/9 11:41:06

Ubuntu系统复制（U盘-电脑硬盘）

所需环境电脑自带硬盘：1块 (1T) U盘1：Ubuntu系统引导盘（用于“U盘2”复制到“电脑自带硬盘”） U盘2：Ubuntu系统盘（1T，用于被复制） ！！！建议“电脑…...

编程新知 2025/11/10 4:18:39

小木的算法日记-多叉树的递归/层序遍历

🌲 从二叉树到森林：一文彻底搞懂多叉树遍历的艺术 🚀 引言你好，未来的算法大神！ 在数据结构的世界里，“树”无疑是最核心、最迷人的概念之一。我们中的大多数人都是从二叉树开始入门的，它…...

编程新知 2025/7/6 4:23:14