没啥用的CSS小知识！【更新中】

文档共建
,
1

做个小汇总吧！简单的就直接在这写，复杂点的就另开话题，然后在此引用。

没有章法，想到哪写到哪！

点赞催更！长期更新，直至自动关闭~

一、实用代码篇

改变插入光标的颜色

caret-color: red;

改变placeholder样式

input::placeholder{
  // 自定义样式
}

渐变使用纯色

// 使用两个相同颜色即可
background-image：linear-gradient(#333,#333);

固定宽高比

.box {
  width: 120px;
  aspect-ratio: 16/9;
}

平滑滚动

scroll-behavior: smooth;

统一全局强调色

accent-color: red;

块自适应内容大小

width: fit-content;

单行文本两端对齐

text-align-last: justify;

滚动锚点内边距

scroll-padding: 20px;

二、理论技巧篇

透明色的简写

通常我们写透明色，会使用诸如 transparent 关键字 或者 rgba(r,g,b,0) 。

其实可以直接使用 16进制 简写：#0000。

渐变背景的叠加

在我以往的一些画图中，都是用到过。

这里说一下：背景渐变的叠加优先级是 上层覆盖下层。

巧妙利用checkbox

checkbox的两种状态，可以很好的利用来实现一些只有两种状态的交互。例如侧边栏的展收、手风琴样式的菜单等。

需要配合其它选择器：:not()、:has()。

参见案例 利用 checkbox 来实现一些小功能

善于使用三角函数

在一些特殊的运动轨迹中，我们可以很好的利用圆周运动的特性，如正弦函数与余弦函数。利用振幅乘以系数来扩大半径等。

参见案例 【动画而已】手摸手带你实现 WINDOWS 加载动画

使用选择器嵌套

我们有时候的一些需求，可能不是一个选择器能够完成的，这个时候我们就应当条件反射地想起选择器的嵌套。

使用 :not() 来排除，使用 :has() 来筛选等等。

参见案例 🔥应吾皇催更 - 简单说说 :nth-child() 选择器！

使用 :is() 和 :where() 简化代码

在以前的一些相似结构样式中，我们需要重复的写相同的父级，现在我们可以直接使用 :is() 或者 :where() 来简化代码。

.main .box,
.siderbar .box,
.footer .box {
  background:red;
}
//-------------------
:is(.main,.siderbar,.footer) .box{
  background:red;
}
// or
:where(.main,.siderbar,.footer) .box{
  background:red;
}

利用阴影模拟边框

对一些特殊的边框需求，使用传统的边框无法满足需求，这个时候我们可以使用阴影来模拟边框来达到要求。

三、实战演练篇

利用阴影实现3D文本

背景层级展示与阴影模拟边框

使用边框图片实现自适应拉伸背景

妙用阴影复制图形

用3D转换调整层级

超级简单的滚动驱动动画

神奇的文本路径动画属性 - startOffset

利用三角函数的特性

多用选择器嵌套

checkbox的妙用

四、基础科普篇

选择器进阶

选择器优先级与权重计算

:nth-child()选择器进阶玩法

unit函数的简单介绍

CSS 大鹅其它的CSS相关内容

:bili_069: :bili_069: :bili_069: :bili_069: :bili_069:

79 个赞
让块保持胶囊样式的两个方法
【水帖秘笈】加入社区半年，大鹅的小小总结！
一个奇奇怪怪的边框实现
实现不截断的跨行列元素样式
🔥 鹅のCSS大合集！收藏 ≈ 学会！【20260101已更新 77/100 篇】
利用阴影模拟边框的实例
2

高产的大鹅:tieba_087:

2 个赞
3

来给大鹅捧个场

3 个赞
4

找会长领小尾巴了，哈比佬:tieba_087:

3 个赞
5

你什么时候领的 :bili_040:

3 个赞
6

就今天下午

现在好像过时了

3 个赞
7

没事，还有机会。一直持续到元旦呢 :bili_040:

3 个赞
8

缘份到了 我看到你了

7 个赞
9

谢谢会长

3 个赞
10

会长神出鬼没:tieba_087:

3 个赞
11

太强了！大鹅

4 个赞
12

怎么自动发出来了，我还在写呢 :tieba_087:

4 个赞
13

刚看到，这里是文档共建，我们这么吹水是不是不太合适？

3 个赞
14

佬，想要 :tieba_095:

4 个赞
15

文字想我了，她自己就蹦哒出来了:tieba_087:

3 个赞
16

关注会长
会长发福利的时候就提醒你了:tieba_087:

4 个赞
17

无事，怕到时候过期了不能编辑，所以放到文档 :tieba_087:

3 个赞
18

那就好，不然在大鹅的共建文档下吹水有罪恶感:tieba_087:

2 个赞
19

又有缘份了

8 个赞
20

会长诶 :tieba_095:

3 个赞