HTML/CSS

若要设置为与视口一样高，您可以使用 vw 和 vh 单位。 vw 和 vh 我们已经很熟悉了，不多讲 ，如下图： 我们用的比较少的有vmin和vmax： vmin是在vh和vw中获取最小值 vmax是在vh和vw中获取最大值 这些单位对各种...

赞(0)lee12142025-11-16阅读(10)

今天来分享 18 个鲜为人知但很有用的 CSS 技巧！ 图片文字环绕 shape-outside 是一个允许设置形状的 CSS 属性。它还有助于定义文本流动的区域： shape-outside 属性定义了一个可以是非矩形...

赞(0)lee12142025-11-15阅读(12)

8 月 26 日，2023 年度 State of CSS 调查（CSS 现状调查）结果正式公布！2023 年 CSS 状况调查于 2023 年 6 月 15 日至 7 月 15 日进行，共收到了 9108 份回复。下面...

赞(0)lee12142025-11-15阅读(12)

今天在群里，有个小伙伴问了这么一道很有趣的问题： CSS 能否实现，容器再某个高度下是某种表现，一旦超出某个高度，则额外展示另外一些内容 为了简化实际效果，我们看这么一张示意效果图： 可以看到，当容器高度没有超过某一个值时，没有箭头图标。反...

赞(0)lee12142025-11-15阅读(11)

CSS，不再只是“样式表” 大多数人第一次接触 CSS 的时候，都会觉得它是“被动的”：给元素设定颜色、大小、位置—就像在调一张图 但随着它的发展，现在的 CSS，早已变得可计算、可逻辑、可表达动态关系；函数正是这种变化的核心之一 从最早的...

赞(0)lee12142025-11-09阅读(33)

最近，在 CodePen 上看到这样一个非常有意思的效果： 这个效果的核心难点在于气泡的一种特殊融合效果。 其源代码在：CodePen Demo — Goey footer，作者主要使用的是 SVG 滤镜完成的该效果，感兴趣的可...

赞(0)lee12142025-11-03阅读(40)

今天，分享一个实际业务中能够用得上的动画技巧。 巧用逐帧动画，配合补间动画实现一个无限循环的轮播效果，像是这样： 看到上述示意图，有同学不禁会发问，这不是个非常简单的位移动画么？ 我们来简单分析分析，从表面上看，确实好像只有元素的 tran...

赞(0)lee12142025-11-03阅读(41)

accent-color 是从 Chrome 93 开始被得到支持的一个不算太新属性。之前一直没有好好介绍一下这个属性。直到最近在给一些系统整体切换主题色的时候，更深入的了解了一下这个属性。 简单而言，CSS accent-color 支持...

赞(0)lee12142025-11-03阅读(55)

在 23 年的 CSS 新特性中，有一个非常重要的功能更新 — 相对颜色。 简单而言，相对颜色的功能，让我们在 CSS 中，对颜色有了更为强大的掌控能力。 其核心功能就是，让我们能够基于一个现有颜色 A，通过一定的转换规则，快速...

赞(0)lee12142025-11-03阅读(56)

之前看过一篇与原生嵌套相关的文章 — CSS 即将支持嵌套，SASS/LESS 等预处理器已无用武之地？，彼时 CSS 原生嵌套还处于工作草案 Working Draft (WD) 阶段，而今天（2023-09-02），CSS ...

赞(0)lee12142025-11-03阅读(39)