标签： css
用 ::target-text 轻松为文本片段添加样式
默认高亮效果会在片段文本下方显示浅黄色高亮条
CSS 相对颜色语法
Chrome 119 中新增了 CSS 颜色级别 5 中非常强大的颜色功能。相对颜色语法为在 CSS 中操控颜色提供了顺畅的途径，为作者和设计师提供了以下方式：
打造美观网站所需的最少 CSS
人们常常过度设计解决方案，这导致他们在CSS应用中遇到问题。本文将探讨构建美观网页所需的最精简CSS方案。
CSS 拥有42种单位
最近因网站项目需求，我接触到了CSS单位“dvh”。此前从未留意过这个单位的存在，于是开始梳理自己遗漏的其他单位。初学HTML/CSS时，我们仅掌握这9种常用单位，如今显然已扩展至42种：
CSS锚点(Anchor)定位详细说明文档
了解CSS锚点(Anchor)定位，包括其语法、属性、如何用于将一个元素定位在另一个元素旁边，甚至如何用于根据其他元素调整元素的大小。
CSS border-image 的神奇用法
border-image属性是一款功能强大却常被忽视的CSS工具，它提供了惊人的灵活性。通过对图像进行分割、重复和偏移设置，您只需极少代码即可创建复杂边框、装饰元素，甚至动态叠加层。
CSS 角形状（corner-shape）能实现哪些效果？
如今圆角设计已不再令人雀跃。事实上，锐角设计正强势回归，与”方圆体”（方形圆角或圆形方角，任君选择）同样风靡——这正是CSS的corner-shape属性能实现的效果
可以用 CSS 实现这些，不再需要 JavaScript
现代CSS技术很多程度上实现了以前很多需要JavaScript完成的功能
苹果公司拥有一个私有CSS属性，可为网页内容添加液态玻璃特效
苹果若不用这项技术，自然不会开发它。具体应用在何处？我们不得而知。但它必定存在于某个角落。我们从未察觉其具体位置的事实，恰恰说明我们在日常使用iOS时，早已在不知不觉中与WebViews进行了交互。
用 CSS random() 掷骰子
编程语言中的随机函数令人惊叹。它们能生成变化，让事物充满即兴与新鲜感。此前CSS始终无法生成随机数，而如今random()函数即将问世。
CSS中的will-change属性究竟有何作用？
will-change在各类动画中展现出强大效能，可视为动画的“加速模式”。但它并非魔法般的性能开关，更像是向浏览器发出预告信号。
旧版 CSS，新版 CSS
有一个 绘画 API，它允许你使用 canvas API 通过 JavaScript 实时生成背景，这真是……相当厉害
完整的 Flexbox CSS 指南
Flexbox迅速成为全球最常用的CSS布局方法之一。这一新特性也在2013年被《Net》杂志评为“最佳新网络技术”。
使用 light-dark() 的 CSS 配色方案相关颜色
到目前为止，对所用 color-scheme 值做出响应是系统颜色专有的功能。得益于 CSS 颜色模块级别 5 中指定的 light-dark()，您现在也可以使用相同的功能。
CSS 层叠层级(@layer)指南
这是您全面了解 CSS 层叠层的指南，CSS 层叠层是一项 CSS 功能，允许我们明确定义具有特定优先级的层，从而在项目中完全控制哪些样式具有优先级，而无需依赖特定性技巧或 !important。
CSS 玻璃效果生成器
现代3D玻璃效果生成器
使用 CSS 实现缩放动画：变换顺序很重要……有时
当你动画化 scale 时，目标的宽度和高度会在整个动画过程中线性变化(尽管，如前所述，可以应用缓动效果)。这感觉类似于相机缩放效果
纯 CSS 构建的《我的世界(Minecraft)》
本作品没有 JavaScript。 所有逻辑均 100% 由纯 HTML 和 CSS 生成
contrast-color()：在 CSS 中让浏览器给出对比色
虽然例子都是在彩色背景上显示黑/白色文字，但contrast-color()的用途远不止于此。你可以为文字使用自定义颜色，并将背景设为黑/白色。或者完全不涉及文字，为边框、背景等定义颜色。你可以做很多事情。
使用 margin-trim，布局更简便
margin-trim 属性可以让你告诉容器修剪其子容器的边距，也就是任何顶到容器的边距。这样一来，子元素与容器之间的所有边距空间都被消除了。
几乎不使用 CSS 的暗色模式
要制作柔和的颜色，可以使用 CSS 系统颜色和混色功能（自 2023 年起跨浏览器可用）将前景色与背景色结合起来。这也有助于提高可访问性：如果用户已在浏览器中配置了默认颜色，那么通过混合创建额外的颜色将保留用户的偏好，而直接设置颜色则会产生更刺眼的外观。
了解 CSS 是前端开发的精髓
如果你了解 CSS，你也就了解了样式框架。如果你了解 JavaScript，TypeScript 对你来说也不是什么大问题。这样，你就可以成为高级或主管。
【外评】CSS masonry 砌体布局的替代建议
本博文旨在介绍 Chrome 团队为何对在 CSS 网格布局规范中实现砌体有疑问，并确切阐明备选方案可实现的功能
你需要知道的现代 CSS 技巧（2024 年春季版）
只是因为这些东西都相当新，而且我感觉很多人都不知道这些东西。或者说，即使他们知道，也不甚了解，他们可能需要一个通俗易懂的解释，说明这是什么，为什么他们应该关心，以及一些参考代码。也许你就是这样的人。
使用 :has() 作为 CSS 父选择器及其他更多内容
让我们一步步来亲身体验一下，网络开发人员可以利用这个渴求已久的工具做些什么。事实证明，:has() 伪类不仅仅是一个 “父选择器”。在经历了几十年的死胡同之后，这个选择器能做的事情远不止这些。
