为何div左右边框线性渐变未生效？如何实现向外变白效果？

先看你的代码里的几个致命小问题：

• CSS语法写错了：最后多了个多余的{，这直接导致整个.fade的样式都没生效，浏览器根本读不懂这段CSS！
• border-image用得不对：你只写了渐变的部分，但没加border-image-slice这个必须的属性——没有它，浏览器不知道怎么把渐变应用到边框上；另外你之前给边框设的black颜色，直接把渐变给盖住了，得去掉。
• 渐变方向没选对：你用的linear-gradient(90deg)是水平左右渐变，但对于边框来说，这个方向会让边框上下变色，而你要的是从边框外侧到内侧（水平方向）的白转黄，得调整渐变方向。

修正后的完整代码 #

.fade {
  margin: 2em 2em;
  padding: 2em 0; /* 把上下内边距合并写，更清爽 */
  background: rgb(242,242,194);
  /* 先设置边框的宽度和样式，别加颜色 */
  border-left: 3em solid;
  border-right: 3em solid;
  /* 正确配置border-image：渐变+切割参数 */
  border-image: linear-gradient(to right, white, rgb(242,242,194)) 1 stretch;
}

<div class="fade">Text</div>

为啥这么改？我给你拆解下： #

• 先把语法错误搞定：删掉那个多余的{，样式才能正常生效。
• border-image-slice: 1：因为是线性渐变，设成1就能让渐变在边框上均匀拉伸，完美适配你设的3em边框宽度。
• 渐变方向用to right：左边框会自动从外侧（左）的白色过渡到内侧（右）的背景黄；右边框浏览器会自动翻转渐变方向，变成从外侧（右）白到内侧（左）黄，刚好就是你要的那种“透明渐变”效果。
• 去掉边框颜色：原来的black会把渐变覆盖掉，所以只保留border-left/right: 3em solid就行。

要是你想更精准控制左右边框的渐变（不想让浏览器自动翻转），也可以分开写左右边框的渐变：

.fade {
  margin: 2em 2em;
  padding: 2em 0;
  background: rgb(242,242,194);
  border-left: 3em solid;
  border-right: 3em solid;
  border-left-image: linear-gradient(to right, white, rgb(242,242,194)) 1 stretch;
  border-right-image: linear-gradient(to left, white, rgb(242,242,194)) 1 stretch;
}

这样就能完全实现你想要的效果了！

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