做前端开发最常遇到的情况就是：设计图看着简单，实际写起来全是坑！今天就跟大家分享一个不起眼但折腾我半天的小问题——右侧遮罩的圆角实现，全程真实踩坑，新手朋友可以避避雷～
## 先看需求：设计图长这样
核心很简单：一张背景图左侧正常显示，右侧用遮罩覆盖，重点是遮罩的上下两个角，要做出贴合设计的圆润效果（不是常规的border-radius能搞定的那种）。
初期思路：想当然的“简单方案”
第一眼看到这张设计图，这不就是一张背景图，右侧用一个div遮罩盖住就完事了？思路简单直接，立马动手写代码实现。
初期实现效果如下，遮罩是加上了，但问题也随之而来...
踩坑开始：两个圆角难住我了
最棘手的问题来了——右侧遮罩的上下两个圆角，怎么都做不出设计图的效果。
我先试着用「伪元素+border-radius」做遮挡，想模拟出圆角效果，但要么圆角生硬，要么会露出背景图的边缘，衔接不自然，效果一直不尽如人意。 接着又去查了资料，尝试用网上说的「CSS挖洞技巧」实现，折腾了半天，还是没能解决问题。
期间还试过给左侧标题部分也用div包裹，再添加圆角，但这样会露出底下的背景色，完全不符合设计需求，只能放弃。
CSS径向渐变（radial-gradient）救场
突然想到CSS径向渐变（radial-gradient）的一个特性——它可以设置透明色！
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
radial-gradient的核心用法
1. 定义渐变的形状（shape）
- circle：圆形径向渐变（我这次用到的就是这个）
- ellipse（默认值）：椭圆形径向渐变
2. 定义渐变大小（size）
size决定了渐变的半径范围，也就是渐变“扩散”到多远，常用值有4个：
- closest-side：从中心点到离它最近的边（推荐，贴合需求）
- closest-corner：从中心点到离它最近的角（默认值）
- farthest-side：从中心点到离它最远的边
- farthest-corner：从中心点到离它最远的角
3. 定义渐变位置（position）
position用来定义渐变的中心点，默认是容器中心（center），常用取值方式有3种：
- 关键字：top、bottom、left、right、center（可组合，比如right top就是右上角）
- 百分比：50% 50%（中心）、20% 80%（偏右下）
- 长度值：10px 20px（距左上角的水平、垂直偏移）
4. 颜色节点（color-stop）
至少需要两个颜色值，用来定义渐变的起始和结束颜色，也可以添加多个中间色，可选设置颜色位置：
- 带位置：red 0%、blue 100%、green 50%（颜色在指定位置切换）
- 不带位置：颜色会均匀分布在渐变范围内
关键技巧：利用透明和圆形渐变色实现
radial-gradient最关键的能力，也是我这次解决问题的核心——可以设置透明色（transparent） 。
### 最终实现效果
直接上最终效果图，圆角顺滑
核心代码片段
.container{
background-image: url("./你的背景图");
background-size: 100% 100%;
width: 900px;
height: 300px;
position: relative;
}
.container::before{
content: '';
position: absolute;
top: 80px;
right: 0;
width: 40px;
height: 40px;
color: #fff;
/* 右上不透明，左下透明的渐变遮罩 */
background: radial-gradient(circle at bottom left, transparent 70.7%, #fff 70.8%);
}
.head{
display: flex;
height: 80px;
}
.null-box{
flex: 1;
height: 80px;
background: #ffffff;
}
.title {
width: 200px;
height: 80px;
position: relative;
overflow: hidden;
background: transparent;
color: #fff;
text-align: center;
line-height: 80px;
}
.title::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 20px;
height: 20px;
color: #fff;
/* 右上不透明，左下透明的渐变遮罩 */
background: radial-gradient(circle at bottom left, transparent 70.7%, #fff 70.8%);
}
总结
其实这个需求本身不难，难的是我一开始陷入了「遮罩只能用纯色+border-radius」的固定思维，忽略了CSS径向渐变的透明特性。 如果大家也遇到过类似的CSS小坑，或者有更好的实现方案，欢迎在评论区交流讨论哦！
