BR 技术头条 技术链接、资讯与社区分享流
zh www.zhangxinxu.com / 2018-12-24 23:57 / by @技术头条 / 原作者：@张鑫旭

CSS ::backdrop伪元素是干嘛用的？

打开原文 0 条评论
backdrop这个单词是背景幕布，就是戏曲表演后面的一块布。::backdrop伪元素就是控制需要视觉聚焦的元素后面的背景元素样式的。在web中哪些元素需要视觉聚焦呢？一个是HTML5 <video>视频元素，还有就是HTMl5.2 <dialog>元素，以及处于全屏状态下的普通元素。这些元素的背景样式均可以交给::backdrop伪元素进行控制。

赞过的人

@技术头条

发表评论

相关分享

bl blog.delphij.net / 2026-05-17 14:50

CSS 中的标点悬挂及其现状

本文从中文网页排版中一个容易被忽略的细节切入，解释了标点悬挂如何通过让行首或行尾标点略微越出文本边界，改善段落视觉对齐与阅读体验。

文章不仅介绍了 hanging-punctuation 的 CSS 语法和取值，还用 Safari 与 Chrome 的显示差异说明标准实现与现实兼容性之间的落差。它的价值不在于提供复杂方案，而在于提醒前端开发者：中文排版质量并不只取决于字号、行高和字体，标点、对齐边界和浏览器实现同样会影响最终阅读体验。

对于做内容站、博客、出版类页面或重视中文阅读体验的产品团队，这是一篇短小但有启发性的技术观察。

查看详情
无图
zh www.zhangxinxu.com / 2024-11-02 16:22

时隔两年，Chrome也支持round等CSS数学函数了

本文介绍了CSS中的数学函数 `round()` 的新应用，它能实现多种取整方式，如上舍、下舍、四舍五入等，用于提升样式的精确控制。特别是在字体大小、动画步阶和响应式设计中，`round()` 可防止小数值带来的渲染偏差，使界面更一致。这一函数现已在Chrome中支持，为开发者提供了更灵活的布局工具。

查看详情
无图
zh www.zhangxinxu.com / 2024-09-09 23:40

如何使用纯CSS鉴别是不是Safari浏览器

如何通过纯 CSS 来判断是否为 Safari 浏览器？本文介绍了多种实用技巧和 @supports 规则的使用，帮助开发者轻松检测并处理 Safari 特有的样式兼容性问题。无论是桌面还是 iOS Safari，本文都有详细的解决方案！

查看详情
无图
is www.iszy.cc / 2023-11-29 23:37

让一个元素高度随宽度按比例自适应

宽度的自适应是根据 Viewport 的 width 来调整的，高度的自适应也根据 Viewport 的 height 来调整的，理论上和 width 没有任何关系。所以需要找到一个可以关联上 Viewport 的 with 的属性还能撑起高度。

这个属性就是 padding，padding 是根据 Viewport 的 width 来调整的，padding-top 和 padding-bottom 也是如此，所以我们设置这个属性就可以和 width 保持一定比例了。

查看详情
无图
in insights.thoughtworks.cn / 2022-09-08 17:45

整洁架构之CSS

虽然开发工具早已经从 preprocessor 进化到了 styled component，但在我看来新的工具并没有让我们的样式代码写的更好，只是更快——也可能会让代码坏的更快。工具的繁荣并没有让那些导致代码难以维护的根本问题烟消云散，而是更易让我们对其视而不见。这篇文章旨在回答一个问题：为什么样式代码难以写对，它的陷阱究竟在哪里？

查看详情
无图
zh www.zhangxinxu.com / 2022-08-31 23:15

HTML slot 插槽元素深入


本文应该是目前最深入最细致的介绍 HTML slot 插槽元素的文章了，如果您对 Web 组件开发感兴趣，则本文内容不容错过。

查看详情
无图
zh www.zhangxinxu.com / 2022-08-31 23:08

如何继承自定义元素及其他JS中扩展新方法


相似内核但语义不同的Web组件该如何更高效的组织代码才能兼顾可维护性和可阅读性呢？如何在任意位置对已由的自定义元素组件进行方法或属性的扩展呢？一点实战经验分享，希望可以帮到大家的工作。

查看详情
无图