如何用纯CSS实现目标样式按钮？现有代码无法正常工作

我想要制作如下样式的按钮（参考图片：），要求仅使用纯CSS实现。我尝试了以下代码，但并未达到预期效果，无法正常工作：

display: inline-block;
width: 165px;
text-align: center;
color: #fff;
background: linear-gradient(180deg, #4b3529 21%, #4c2e1a 100%);
border-radius: 5px;
border: 1px solid #ffffff;
font-family: Arial;
font-weight: normal;
border-left: 2px solid #e5ccaf;
border-image: linear-gradient(to bottom, #ffd400,rgba(0, 0, 0, 0)) 0 100%;
border-top: 1px solid #ffd400;

当前效果如图：，请问该如何实现目标样式？

你的代码核心问题是混用普通边框与border-image导致样式冲突，且未精准还原目标按钮的边框细节。以下是两种可行的修正方案：

方案一：利用多层背景模拟边框 #

通过background-clip区分内容区与边框区，同时设置各边独立边框样式，避免属性冲突：

<button class="target-btn">按钮文本</button>

.target-btn {
  display: inline-block;
  width: 165px;
  padding: 8px 0;
  text-align: center;
  color: #fff;
  font-family: Arial;
  font-weight: normal;
  border: none;
  border-radius: 5px;
  /* 多层背景：内容区背景 + 左侧渐变边框 + 顶部亮金边框 */
  background: 
    linear-gradient(180deg, #4b3529 21%, #4c2e1a 100%) padding-box,
    linear-gradient(to bottom, #ffd400, rgba(76,46,26,0)) border-box;
  border-top: 1px solid #ffd400;
  border-left: 2px solid transparent;
  border-right: 1px solid #2d1f16;
  border-bottom: 1px solid #2d1f16;
}

方案二：伪元素实现左侧渐变边框 #

通过伪元素单独构建左侧渐变边框，更精准控制渐变范围：

.target-btn {
  position: relative;
  display: inline-block;
  width: 165px;
  padding: 8px 0;
  text-align: center;
  color: #fff;
  font-family: Arial;
  font-weight: normal;
  background: linear-gradient(180deg, #4b3529 21%, #4c2e1a 100%);
  border-radius: 5px;
  border-top: 1px solid #ffd400;
  border-right: 1px solid #2d1f16;
  border-bottom: 1px solid #2d1f16;
  border-left: none;
  overflow: hidden;
}

.target-btn::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, #ffd400, #e5ccaf, rgba(76,46,26,0));
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

关键优化点： #

• 移除原代码中冲突的border-image属性，避免与普通边框样式互相覆盖。
• 调整按钮内边距，提升视觉饱满度，匹配目标按钮的尺寸比例。
• 用深色边框（#2d1f16）替换原白色边框，贴合目标按钮的深色边缘效果。

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