如何为单个div设置右上方向的Background linear-gradient？

嘿，我懂你想要的效果啦——就是让div的顶部边缘和右侧边缘都有渐变过渡对吧？你当前的代码只控制了水平方向的渐变，所以没法同时实现两个方向的效果，不过CSS的linear-gradient完全能搞定这个需求，给你两种实用的方案：

方案一：双重线性渐变叠加（分别控制顶部和右侧） #

这个方案可以让顶部和右侧各自独立呈现渐变，适合需要两个边分别有渐变的场景：

.your-div-class {
  background: 
    /* 顶部渐变：从上到下，浅灰→透明，高度占3% */
    linear-gradient(to bottom, rgb(240, 240, 240), transparent 3%) top,
    /* 右侧渐变：从右到左，浅灰→透明，宽度占3% */
    linear-gradient(to left, rgb(240, 240, 240), transparent 3%) right;
  /* 分别设置两个渐变的尺寸：顶部渐变宽100%高3%，右侧渐变宽3%高100% */
  background-size: 100% 3%, 3% 100%;
  /* 禁止渐变重复平铺 */
  background-repeat: no-repeat;
}

如果想要平滑的颜色过渡（不是硬切换），可以把transparent换成白色，让渐变自然衔接：

.your-div-class {
  background: 
    linear-gradient(to bottom, rgb(240, 240, 240), rgb(255, 255, 255) 3%) top,
    linear-gradient(to left, rgb(240, 240, 240), rgb(255, 255, 255) 3%) right;
  background-size: 100% 3%, 3% 100%;
  background-repeat: no-repeat;
}

方案二：单渐变实现右上角扩散效果 #

如果你想要的是从**右上角（顶部+右侧的交汇点）**向左下方向扩散的渐变，那可以直接指定渐变方向为to bottom left，控制颜色停止点即可：

.your-div-class {
  background: linear-gradient(to bottom left, rgb(240, 240, 240) 3%, rgb(255, 255, 255) 3%);
}

这个效果是右上角的3%区域为浅灰色，剩下的区域直接过渡到白色，适合需要角落渐变的场景。

你可以根据自己想要的视觉效果选择对应的方案，试试调整3%这个数值还能改变渐变的范围哦～

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