如何创建带线性渐变边框、圆角及透明背景的按钮？

你需要的是背景完全透明、带有线性渐变边框和圆角的按钮，现有代码中.btn-gradient-2用了白色的padding-box背景，导致按钮背景不透明，以下是解决技巧：

核心思路 #

利用CSS的background-clip属性，将渐变背景限制在边框区域（border-box），同时让内容区域（padding-box）保持透明，配合透明边框和圆角实现需求。

修改后代码 #

CSS

.btn-gradient-transparent {
  border: 4px solid transparent;
  border-radius: 50em;
  /* 背景分两层：padding层透明，border层渐变 */
  background: 
    linear-gradient(transparent, transparent) padding-box,
    linear-gradient(to right, darkblue, darkorchid) border-box;
}

.parent {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  background-color: red;
  padding: 1rem;
}

HTML

<div class="parent">
  <button class="btn-gradient-transparent">透明背景渐变按钮</button>
</div>

代码说明 #

• border: 4px solid transparent：设置透明边框，为渐变边框预留显示空间
• background双层配置：
  • 第一层linear-gradient(transparent, transparent) padding-box：让按钮的内容区域（padding及以内）完全透明，padding-box限定该背景仅作用于padding及内部区域
  • 第二层linear-gradient(to right, darkblue, darkorchid) border-box：让渐变背景覆盖边框区域（border-box包含边框、padding和内容区），但因为第一层背景在上方，最终只有边框区域显示渐变
• border-radius: 50em：实现圆角效果，边框和背景会自动适配圆角

内容的提问来源于stack exchange，提问作者jonlal