如何实现无左边框的渐变边框按钮/链接？

直接用CSS伪元素就能搞定，避开border-image的兼容性和衔接问题，代码如下：

.custom-btn {
  display: inline-block;
  padding: 0.8rem 1.5rem;
  text-decoration: none;
  color: #333;
  background-color: #fff;
  position: relative;
  /* 右侧固定红色边框 */
  border-right: 2px solid #ff3333;
  /* 清除左侧默认边框 */
  border-left: none;
}

/* 上边框：从右到左，红色渐变至浅深色/透明 */
.custom-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(to left, #ff3333, rgba(0, 0, 0, 0.1));
}

/* 下边框：和上边框渐变方向一致 */
.custom-btn::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(to left, #ff3333, rgba(0, 0, 0, 0.1));
}

调整说明 #

• 如果想要渐变的红色段更短，可修改渐变的百分比参数，比如：linear-gradient(to left, #ff3333 15%, rgba(0,0,0,0.1) 100%)
• 把rgba(0,0,0,0.1)换成实色（比如#222）就能得到到深色的渐变效果
• 按钮的内边距、边框厚度、颜色值都可以根据需求直接修改

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