踩坑实录：设计图上的两个小圆角，我试了3种方法才搞定✨

做前端开发最常遇到的情况就是：设计图看着简单，实际写起来全是坑！今天就跟大家分享一个不起眼但折腾我半天的小问题------右侧遮罩的圆角实现，全程真实踩坑，新手朋友可以避避雷～

## 先看需求：设计图长这样

核心很简单：一张背景图左侧正常显示，右侧用遮罩覆盖，重点是遮罩的上下两个角，要做出贴合设计的圆润效果（不是常规的border-radius能搞定的那种）。

初期思路：想当然的"简单方案"

第一眼看到这张设计图，这不就是一张背景图，右侧用一个div遮罩盖住就完事了？思路简单直接，立马动手写代码实现。

初期实现效果如下，遮罩是加上了，但问题也随之而来...

踩坑开始：两个圆角难住我了

最棘手的问题来了------右侧遮罩的上下两个圆角，怎么都做不出设计图的效果。

我先试着用「伪元素+border-radius」做遮挡，想模拟出圆角效果，但要么圆角生硬，要么会露出背景图的边缘，衔接不自然，效果一直不尽如人意。接着又去查了资料，尝试用网上说的「CSS挖洞技巧」实现，折腾了半天，还是没能解决问题。

期间还试过给左侧标题部分也用div包裹，再添加圆角，但这样会露出底下的背景色，完全不符合设计需求，只能放弃。

CSS径向渐变（radial-gradient）救场

突然想到CSS径向渐变（radial-gradient）的一个特性------它可以设置透明色！

arduino 复制代码

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） 。

### 最终实现效果

直接上最终效果图，圆角顺滑

核心代码片段

css 复制代码

.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小坑，或者有更好的实现方案，欢迎在评论区交流讨论哦！