% CSS: &#s border 任何元素的淘汰行为！

传说，总有一天，任何 html 元素都可以实现漂亮的 fieldset 边框剔除效果。

我有个好消息：在 Chrome 中，这一天就是今天！

场集？传奇？

如果您不熟悉，这里是带有图例的字段集的边框剔除效果：

_{VanillaHTML 中稍作修改的屏幕截图中的字段集图例示例}

图例（标题）的宽度会自动在字段集的边框上剪出一个洞。

虽然技术上可以只使用

;和在任何地方，通常不建议使用

之外并且没有任何其中的元素，因为字段集的主要目的是对相关表单输入进行语义分组。在不相关的上下文中使用它违背了其预期含义，并且可能会对屏幕阅读器的可访问性产生负面影响。

任何地方的 Fieldset 边框图例淘汰行为

这并不是一件容易完成的事情，所以我隐藏了我能做到的每一点复杂性，使其尽可能容易复制：

1. @import css 中的 fieldset-legend 实用程序。
2. 将 fieldset-legend 类添加到包装器
3. 将 --fl-left 属性设置为任意 值（如果您愿意，甚至可以是负值）

并且库将定位 :first-child 使其与元素顶部垂直居中，并剔除其后面的内容！

要在标题周围创建间隙，请根据需要向 :first-child 添加填充。

这里最大的问题是你不能将纯文本节点直接放入 fieldset-legend 包装器中，文本必须嵌套在它们自己的元素内。

此外，技术上字段集的边框剔除不会下沉到图例元素的底部并剪切背景，就像上面那样。

如果您希望淘汰赛仅下沉穿过边界，您可以提供额外的属性，--fl-sink 并将其设置为等于边框宽度：

它还有其他作用吗？

确实如此！

--fl-左替代品

您可以使用--fl-center代替--fl-left。
如果将 --fl-center 设置为 0px，标题将沿顶部边缘水平居中。
如果设置为-10px，它将向中心左侧偏移10px。
将其设置为 15px，它将从中心向右移动 15px。

除了 --fl-left 或 --fl-center，您还可以使用 --fl-right 来实现预期的行为。

所有这 3 个都是可以是正数、0px 或负数。

标题为：第一个孩子的替代方案

将其他元素（例如仅限屏幕阅读器的页面跳转）放置在 fieldset-legend 容器内的标题之前可能很重要。

将类 fieldset-legend-title 放置在 fieldset-legend 元素的任何一个直接后代上，库会将该元素提升到顶部相同的所需位置，而仅保留 :first-child。

fieldset-legend 使用 ::before 伪

您可以让它使用 ::after 伪变量，只需将类名从 fieldset-legend 更改为 fieldset-legend-after

fieldset-legend 没有伪？

这是高级用法，但是...

可以插入：0px；包装器内的元素，根据需要对其进行自定义，并使用 fieldset-legend-custom 而不是 fieldset-legend 或 fieldset-legend-after。

这会删除所有库的剪辑，并为您提供一个自定义蒙版，以便在 fieldset-legend-custom 元素内的任何位置使用。

例如，如果您想将其与您最喜欢的科幻塑造库、augmented-ui 一起使用：

回退行为

使用此实用程序所需的限制功能支持是时间线范围。

还需要容器样式查询。

这是本文中的第一个演示在非 Chrome 浏览器中的样子：

它应用相同的机械样式来最小化差异，例如非静态位置和隔离：isolate；但最值得注意的是，它将标题移回到内联并做了两件事！重要的事情：

1. 标题颜色变为 currentColor - 标题后面的内容从正文切换到 fieldset-legend 容器的内部，该容器可能具有非常不同的背景。使用 currentColor 可确保内容可读，因为非字段集中的其余内容可能已正确设置。
2. 同样，我不知道你的标题元素是否已经有自己的背景（尽管如果有，你不需要这个实用程序将其定位在边框上），因此背景被迫透明，确保 fieldset-legend 背景上的 currentColor，在大多数情况下已经可读。

要确定特定的后备行为，您可以设置
--fl-fallback-title-color 和 --fl-fallback-title-background 将用于代替 currentColor 或在不支持的情况下渲染的情况下透明。

这就是上面的自定义演示在不支持 fieldset-legend 的浏览器中的样子：

进一步的后备支持

如果你知道如何使用我的旧空间切换技术，图书馆还提供：

--fl-supported，支持时为空格，不支持时为首字母

和

--fl-不支持，相反。

---

打开联系方式？

如果您需要任何方面的帮助、有功能请求或想要分享您创建的内容，请务必联系我们！

% CSS: s border 任何元素的淘汰行为！	% CSS: s border 任何元素的淘汰行为！	DEV Blog	% CSS: s border 任何元素的淘汰行为！	% CSS: s border 任何元素的淘汰行为！

?@JaneOri.% CSS:

s border

任何元素的淘汰行为！

？@Jane0ri

以上是% CSS: &#s border 任何元素的淘汰行为！的详细内容。更多信息请关注PHP中文网其他相关文章！