[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添加渐变边框来避免掩盖。 边框图像解决方案虽然更简单，但却具有

的局限性。 这些方法比铬特异性解决方案提供了更好的跨浏览器兼容性。 原始文章中提供了这些方法的更多详细信息和代码示例。 也在原始文章中也描述的混合解决方案提供了另一种方法，但具有有关背景交互的局限性。 每种方法都具有其优点和劣势，具体取决于所需的跨座支持水平和特定的设计要求。