% CSS:

&#s border

任何元素的淘汰行為！

任何地方的 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: