概要 最近项目中有遇到一种场景需要元素以固定宽高比且元素的宽度占父元素的固定百分比的情况，简而言之就是元素的宽度是随浏览器而变化，元素的高度是随元素的宽度变化的。 实现方式一：使用aspect-ratio...

在这篇文章中，我想向您展示一些简单的CSS技巧，您可以在下一个项目中使用它们。让我们开始吧！ 1、-webkit-text-stroke 通过使用这个简单易用的属性，可以创建出酷炫的文字效果。它可以给文字添加描边。-...

CSS 的 Viewport单位听起来很棒。 如果你想将一个元素设置成全屏高度，你可以设置高度:100vh，这样你就有了一个完美的全屏元素，它会随着视口的改变而改变大小！！！ 遗憾的是，事实并非如此！...

本文将介绍 CSS 中一个非常有意思的属性 mask 。 顾名思义，mask 译为遮罩。在 CSS 中，mask 属性允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。 其实 mask 的出...

在推特上面看到 T. Afif介绍的十个 Loading 效果。如上图。 Yeah，很赞哦，挺实用的，遂记录下来。 为保证运行正常，咱先规定下： * { box-sizing: border-box; } 1. 平滑加载 <div...

前言 随着前端的不断发展，更多新的 CSS 属性不断加入提案，本文列举 7 个不常用但很有用且你见过也可能没见过的 CSS 属性，带大家领略 CSS 之美。 1. position: sticky 不知道大家平时业务开发中...

今天来分享 18 个鲜为人知但很有用的 CSS 技巧！ 图片文字环绕 shape-outside 是一个允许设置形状的 CSS 属性。它还有助于定义文本流动的区域： .any-shape { width: 300px; float: left; shape-...

在业务中，有这么一种场景，表格下的某一列 ID 值，文本超长了，正常而言会是这样： 通常，这种情况都需要超长省略溢出打点，那么，就会变成这样： 但是，这种展示有个缺点，3 个 ID 看上去就完全...

CSS（层叠样式表）是一种功能强大的标记语言，允许 Web 开发人员创建视觉效果惊人且响应迅速的设计。 CSS（尤其是与 JS 结合以实现响应）可能是 Web 开发中最重要的部分。  一旦我们达到了特定的性能阈值...

CSS 伪元素是一项强大的功能，它允许您为所选元素的特定部分设置样式，而无需额外的 JavaScript 代码。  虽然许多开发人员都熟悉常用的伪元素，如 ::before 和 ::after，但还有一些其他元素经常被忽视或...