分割线渐变边框

两端透明、中间实色的分割线，用 border-image 把线性渐变画到边框上。

css

.card-divider {
  border-top: 1px solid #acadbc;
  border-image: linear-gradient(270deg, rgba(172, 173, 188, 0), rgba(172, 173, 188, 1), rgba(172, 173, 188, 0)) 1 1;
}

规则

线宽来自 border-width。border-style 要写成 solid 等可见样式；部分浏览器在 none，或 border-width 为 0 时不绘制 border-image。
渐变替换边框绘制。border-color 只在图像无法显示时回退。
末尾 1 1 是 border-image-slice：第一个值切上下，第二个值切左右。两边都是 1 时与单值 1 相同。中间区域默认丢弃，不加 fill 不会铺进内容区。
border-image 作用于四边。只写 border-top 时其余边宽度为 0，渐变只出现在上边。
色标两端对称时，90deg 与 270deg 外观相同。270deg 等于从右向左。

边界

border-radius 不作用于 border-image，边框保持直角。需要圆角渐变边框时，改用透明边框加双层 background：内容层 background-clip: padding-box，渐变层 background-clip: border-box。
border-image 简写会重置未写出的子属性。切片要写在简写里。
分割线不依附元素边框时，用 1px 高的元素配 background 渐变即可，不必走 border-image。

css

.divider {
  height: 1px;
  background: linear-gradient(90deg, rgba(172, 173, 188, 0), rgba(172, 173, 188, 1), rgba(172, 173, 188, 0));
}