[2

最近，我尋求編碼靈感，缺乏藝術才能。我的方法？ 複製他人的視覺吸引力創作，重點關注清潔，簡潔的代碼。 這些糖果幽靈按鈕引起了我的注意！

初始設置

一個簡單的按鈕元素形成基礎，併入emoji insertion的

完成後完成，我發現了野生動物園的重大剪輯到文本限制。 它在按鈕元素上失敗，

（以及可能的網格）元素以及子元素文本。 因此，此處描述的技術是不可能的。解決方法涉及在按鈕中嵌套，並確保它覆蓋父框架。 對於缺少物理Apple設備訪問的Linux用戶，我建議Epiphany（謝謝，Brian！）。 CSS利用圖標的pseudo-element和文本/圖標對齊的網格佈局。 邊界，填充，邊界 - 劃線， - 對角梯度的slist

boo!

baccking-origin baccking-clip 都設置為。 背景-origin 定位 background-position s 0,0點在指定框的上左上角，確定 cropppivent-size

border-box 確保梯度跨越整個邊框框。 默認 padding-box 此方法採用三個掩碼層和合成。 在[鏈接到速成課程]中可以找到蒙版複合的複習。 僅在CSS面膜層中alpha通道很重要。 RGB頻道不會影響結果。 我們從兩層開始：一個完全不透明的層覆蓋邊框框（alpha = 1），第二層也完全不透明，層僅限於填充盒（alpha = 1 in padding-box中，在室外0）。

button {
  display: grid;
  grid-auto-flow: column;
  grid-gap: .5em;
  border: solid .25em transparent;
  padding: 1em 1.5em;
  border-radius: 9em;
  background: 
    linear-gradient(to right bottom, var(--slist)) 
      border-box;
  font: 700 1.5em/ 1.25 ubuntu, sans-serif;
  text-transform: uppercase;

  &::after { content: attr(data-ico) }
}

按鈕 { / *相同的基礎樣式 */ -Full：線性級別（紅色0 0）; -webkit mask：var（ - 完整）填充框，var（ - 完整）; -webkit面具複合材料：XOR; 蒙版：var（ - 完整）填充盒排除，var（ - 完整）; } 蒙版複合，非標準版本已覆蓋。 這會產生一個漸變邊框，但缺乏文本。 添加第三個掩碼層，僅限於文本（帶有透明的文本），並與先前的結果進行置換，從而添加了文本。 但是，由於非標準的bask-clip ，這是特定於chrome的。 a 按鈕 { / *相同的基礎樣式 */ @supports（-webkit mask-clip：text）{ -webkit-text-fill-color：透明； -Full：線性級別（紅色0 0）; -webkit mask：var（ - 完整）文本，var（ - 完整）填充盒，var（ - full）; -webkit面具複合材料：XOR; } } 這是一種簡單的方法，但是它對非標準功能的依賴限制了其瀏覽器兼容性。 讓我們探索替代方案，更廣泛支持的方法。 替代方法：偽元素和邊界圖像解決方案

pseudo-Element添加漸變邊框來避免掩蓋。 邊框圖像解決方案雖然更簡單，但卻具有

的局限性。 這些方法比鉻特異性解決方案提供了更好的跨瀏覽器兼容性。 原始文章中提供了這些方法的更多詳細信息和代碼示例。 也在原始文章中也描述的混合解決方案提供了另一種方法，但具有有關背景交互的局限性。 每種方法都具有其優點和劣勢，具體取決於所需的跨座支持水平和特定的設計要求。