新的 CSS 视口单位：svh、lvh、dvh！
若要设置为与视口一样高，您可以使用 vw 和 vh 单位。 vw 和 vh 我们已经很熟悉了，不多讲 ，如下图： 我们用的比较少的有vmin和vmax： vmin是在vh和vw中获取最小值 vmax是在vh和vw中获取最大值 这些单位对各种...
lee1214的文章
lee1214
18个很有用的 CSS 技巧
今天来分享 18 个鲜为人知但很有用的 CSS 技巧！ 图片文字环绕 shape-outside 是一个允许设置形状的 CSS 属性。它还有助于定义文本流动的区域： shape-outside 属性定义了一个可以是非矩形...
2023 CSS 现状调查结果新鲜出炉，带你看看 CSS 生态圈最新技术趋势！
8 月 26 日，2023 年度 State of CSS 调查（CSS 现状调查）结果正式公布！2023 年 CSS 状况调查于 2023 年 6 月 15 日至 7 月 15 日进行，共收到了 9108 份回复。下面...
CSS 也能实现 if 判断？实现动态高度下的不同样式展现
今天在群里，有个小伙伴问了这么一道很有趣的问题： CSS 能否实现，容器再某个高度下是某种表现，一旦超出某个高度，则额外展示另外一些内容 为了简化实际效果，我们看这么一张示意效果图： 可以看到，当容器高度没有超过某一个值时，没有箭头图标。反...
50 个实用前端 JavaScript/CSS 代码片段
在前端开发中，我们经常会遇到一些重复性的问题，本文整理了 50 个高频且实用的 JavaScript 和 CSS 代码片段，涵盖设备判断、事件监听、操作 DOM、处理数据等多个方面，助你提升开发效率。 1. 判断是否为移动端 2. 获取元素...
设计师看懵，程序员却上头：CSS 函数有多强？~(颜色篇)
CSS，不再只是“样式表” 大多数人第一次接触 CSS 的时候，都会觉得它是“被动的”：给元素设定颜色、大小、位置—就像在调一张图 但随着它的发展，现在的 CSS，早已变得可计算、可逻辑、可表达动态关系；函数正是这种变化的核心之一 从最早的...
使用纯 CSS 实现超酷炫的粘性气泡效果
最近，在 CodePen 上看到这样一个非常有意思的效果： 这个效果的核心难点在于气泡的一种特殊融合效果。 其源代码在：CodePen Demo — Goey footer，作者主要使用的是 SVG 滤镜完成的该效果，感兴趣的可...
文字轮播与图片轮播？CSS 不在话下
今天，分享一个实际业务中能够用得上的动画技巧。 巧用逐帧动画，配合补间动画实现一个无限循环的轮播效果，像是这样： 看到上述示意图，有同学不禁会发问，这不是个非常简单的位移动画么？ 我们来简单分析分析，从表面上看，确实好像只有元素的 tran...
现代 CSS 解决方案：accent-color 强调色
accent-color 是从 Chrome 93 开始被得到支持的一个不算太新属性。之前一直没有好好介绍一下这个属性。直到最近在给一些系统整体切换主题色的时候，更深入的了解了一下这个属性。 简单而言，CSS accent-color 支持...
现代 CSS 解决方案：文字颜色自动适配背景色
在 23 年的 CSS 新特性中，有一个非常重要的功能更新 — 相对颜色。 简单而言，相对颜色的功能，让我们在 CSS 中，对颜色有了更为强大的掌控能力。 其核心功能就是，让我们能够基于一个现有颜色 A，通过一定的转换规则，快速...
