M
U
S
I
- css小寄巧2026-01-11 5:52:30
08-02 雪碧图
理念和优缺点 理念：将多个⼩图⽚拼接到⼀个图⽚中。通过background-position和元素尺⼨调节需要显示的背景图案。 优点： - css小寄巧2026-01-11 5:47:25
02-01 自适应的椭圆
border-radius - 传四个值时，分别对应从左上角以顺时针顺序的各个拐角  - css小寄巧2026-01-11 5:46:49
03-02 不规则投影
困难产生原因 box-shadow会忽视掉伪元素和透明部分 1. 半透明图像、背景图像、或者border-image - css小寄巧2026-01-11 5:46:10
03-01 单侧投影
box-shadow工作过程 css .box { - css小寄巧2026-01-11 5:44:32
02-06 简单的饼图
基于transform方案 用伪元素覆盖上去，通过旋转决定露出多大扇形区  - ailanggraph2026-01-11 5:40:1
1-04-边
边定义了逻辑的路由方式以及图如何决定停止。 一个节点可以有多条出边。如果一个节点有多个出边，那么所有这些目标节点将作为下一个超级步的一部分并行执行。 普通边 - css布局2026-01-06 11:1:52
换肤
CSS 变量 分别定义黑天白夜会变化的变量 css - css小寄巧2026-01-06 10:58:33
08-01 修改svg图片颜色
1. 使用<img>标签或background-image引入 svg 图片 2. 使用以下 html 文件，得到filter值 :::demo - css小寄巧2026-01-06 10:54:25
07-01 精确控制表格列宽
核心痛点 表格的宽高往往难以预测。即使手动设置了尺寸，浏览器仍会优先根据单元格内容自动调整，导致最终布局与预期不符。这种“自动计算”机制也使得浏览器渲染表格时性能损耗较高。 解决办法：固定布局算法 - css小寄巧2026-01-06 10:46:0
06-01 自适应内部元素
难题 在 CSS 中，默认情况下，块级元素的宽度是其父容器的 100%。然而，我们经常需要让一个容器的宽度能够根据其内部的内容自适应。 最常见的场景是：一个带有标题的图片。我们希望容器的宽度由图片的宽度决定，而标题文字（如果较长）则应该在图片宽度范围内自动换行，而不是把容器无限撑宽。 - css小寄巧2026-01-06 10:18:20
05-03 简单视差效果
效果 视觉差效果是一种比较炫酷的网站效果，是指多个元素块以不同的速度移动，形成立体的运动效果，给人视觉上形成一种视觉差的效果 :::dom no-img - css小寄巧2026-01-06 6:31:48
05-02 交互式的图片对比控件
效果 作用：比较两张图片 思路：把两张图片叠加起来，通过滑动只显示上层的一部分，剩下一部分“剪切掉”，形成上层图片和下层图片的比较效果 - css小寄巧2026-01-06 5:43:22
05-01 扩大可点击区域
困难产生原因 对于用户体验，有一个著名的相关法则，Fitts法则 - 人类移动到某个目标区域所需的最短时间是由目标距离与目标宽度之比所构成的对数函数 - css小寄巧2026-01-06 5:40:36
06-02 根据兄弟元素的数量来设置样式
当有 n 个 li 时，命中 li 父元素选择器 公式 css - css小寄巧2026-01-06 5:38:4
04-05 任意路径排布文字
SVG:textPath - 思路：使用<path>创建一个路径（下面示例是一个圆），用<textPath>包裹文字，让文字沿着圆走 html - css小寄巧2026-01-06 5:11:1
04-03 字体描边
-webkit-text-stroke - 单色描边 :::demo - css小寄巧2026-01-06 5:10:24
04-04 字体阴影&艺术字体
凸版印刷效果 对于深色底，浅色字；或中等亮度的背景，深色字 - 出现在底部的浅色投影（或者顶部的暗色投影），会出现物体是凹进平面的错觉 - css小寄巧2026-01-06 4:13:18
04-02 渐变色字体
background-clip: text 1. 设置背景色为对应的渐变色 2. 把背景渐变色设置为知应用到字体上 - css小寄巧2026-01-05 9:56:51
04-01 文字下划线
解决方案 使用background-image和渐变解决 直线 - css小寄巧2026-01-05 9:1:33
02-04 折角效果
45deg折角的解决方案 在切角的基础上，在实现一个折角 css - css小寄巧2026-01-05 5:57:13
02-05 梯形标签页
3D变形方案 一个矩形，用3D旋转可模拟出梯形 但3D变形对与内部来说是不可逆的，所以变形用在伪元素上 - css小寄巧2026-01-05 4:43:25
02-03 切角效果
渐变方案 把一个透明色标放在切角处，然后在相同位置设置另一个色标，并且把它的颜色设置成背景色 css - css小寄巧2026-01-05 4:30:25
02-02 平行四边形
困难产生原因 - 平行四边形只要skew()即可完成，但存在文字内容一起倾斜的问题 :::dom - css小寄巧2026-01-05 3:45:35
01-04 连续的图像边框
图片方案 - 最上层是白色背景，用于放置内容，从padding-box开始渲染 - 下一层是图片，用于显示边框，从border-box开始渲染 - css小寄巧2026-01-05 3:27:34
01-03 边框内圆角
困难产生原因 - 描边不跟着圆角走（新版浏览器已经跟着圆角走了） :::dom - css小寄巧2026-01-05 3:24:52
01-02 多重边框
box-shadow方案 > 优点 > - css小寄巧2026-01-05 3:24:11
01-01 半透明边框
困难产生原因 -background会延伸到border上 - 导致半透明的边框会被background“染色” - aiagent2025-12-30 10:3:34
01-01-提示链
markmap 提示链 核心概念 - css布局2025-12-29 10:1:28
锚点定位布局
CSS 锚点定位 (CSS Anchor Positioning) 学习指南 CSS 锚点定位是一项新兴的 Web 标准，旨在解决无需 JavaScript 即可将一个元素（如提示框、菜单）相对于另一个元素（锚点）进行精确布局的难题。 可以使用 [OddBird](https://www.oddbird.net/) 团队为 CSS 锚点定位提供的 Polyfill （[CSS Anchor Positioning Polyfill](https://anchor-polyfill.netlify.app/)） - css动画与过渡2025-12-29 10:1:28
01-01 CSS 动画
@keyframes 和 animation 1. @keyframes css
木厶 | kingmusi
类型归档
web
html
css
javascript
node
jquery
typescript
vue
react
echarts
electron
前端工程化
java
elastic
mysql
python
flutter
git
算法
部署
图形学
ai