如何为linear-gradient内的红色区域添加左下角及右下角border-radius？

直接给线性渐变里的单个色段加border-radius是做不到的，因为渐变是作为一个整体背景渲染的。可以用伪元素来模拟这个效果，具体实现如下：

body {
  background-color: var(--blue); /* 直接用蓝色作为body背景 */
  height: 100vh;
  margin: 0;
  position: relative; /* 为伪元素定位做准备 */
}

body::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30%; /* 对应原渐变里红色区域的占比 */
  background-color: var(--red);
  border-bottom-left-radius: 15px; /* 左下角圆角，数值可按需调整 */
  border-bottom-right-radius: 15px; /* 右下角圆角，数值可按需调整 */
}

原理说明 #

• 把原渐变里的蓝色部分直接设为body的背景色
• 用::after伪元素创建一个占比30%的红色区块，定位在页面底部
• 给伪元素单独设置左下角和右下角的圆角，完美模拟你要的效果

另外注意：原代码里的var(blue)语法有误，CSS变量需要带双横线，应该写成var(--blue)，记得修正这个问题。

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