border-radius 仅定义形状而不控制颜色，不同颜色圆角需用多重 radial-gradient 背景或伪元素实现；前者简洁现代，后者兼容性好但需额外元素。
border-radius 本身不控制颜色，它只定义形状
很多人误以为 border-radius 能“切出不同颜色的角”，其实它只是裁剪容器的渲染区域。真正决定颜色的是 background-color、border 或 background-image 等属性——而这些属性默认是统一铺满整个元素的，不会因为圆角就自动分区上色。
用多重背景（multiple backgrounds）实现不同颜色圆角
这是最干净、纯 CSS 的解法：把四个圆角分别作为独立的 radial-gradient 背景图层，叠加在统一底色之上。每个渐变只覆盖对应角落，其余部分透明。
.corner-diff {
width: 200px;
height: 120px;
background:
/* 左上角：红色 */
radial-gradient(circle at 0 0, #ff6b6b 12px, transparent 12px),
/* 右上角：蓝色 */
radial-gradient(circle at 100% 0, #4ecdc4 12px, transparent 12px),
/* 左下角：橙色 */
radial-gradient(circle at 0 100%, #ffbe0b 12px, transparent 12px),
/* 右下角：紫色 */
radial-gradient(circle at 100% 100%, #8338ec 12px, transparent 12px),
/* 底色（可选） */
#f8f9fa;
background-size: 50% 50%;
background-repeat: no-repeat;
}-
radial-gradient的at定位确保渐变中心落在角落 -
12px是圆角半径，需和你想要的border-radius值一致 -
background-size: 50% 50%让每个渐变只占左上/右上/左下/右下四分之一区域 - 如果元素有内边距或内容，记得加
padding避免文字被渐变遮盖
用伪元素模拟不同颜色圆角（兼容性更好）
当需要支持老浏览器（如 IE11），或者想更灵活控制每个角的大小/颜色/动画时，可用 ::before 和 ::after 搭配绝对定位。
.corner-diff-pseudo {
position: relative;
width: 200px;
height: 120px;
background: #f8f9fa;
}
.corner-diff-pseudo::before,
.corner-diff-pseudo::after {
content: '';
position: absolute;
width: 24px;
height: 24px;
border-radius: 12px;
}
.corner-diff-pseudo::before {
top: 0;
left: 0;
background: #ff6b6b;
}
.corner-diff-pseudo::after {
top: 0;
right: 0;
background: #4ecdc4;
}
/* 还需额外两个伪元素或子元素处理左下、右下（因一个元素只有两个伪元素） */- 单个元素只有
::before和::after两个伪元素，要实现四角不同色，得再加两个空<span>子元素或使用 CSS 自定义属性 + JS 动态生成 - 伪元素方案对
box-sizing敏感，建议设为border-box - 圆角尺寸必须手动匹配，不能响应式缩放；若父容器尺寸变化，需配合
calc()或媒体查询调整
别踩这些坑
实际写的时候最容易栽在细节上：
立即学习“前端免费学习笔记（深入）”；
-
border-radius值和渐变中的半径值（如上面的12px）不一致 → 圆角边缘出现色块错位或露白 - 忘了设
background-repeat: no-repeat→ 四个渐变图层重复平铺，整个背景花掉 - 用
border加颜色假装圆角 →border无法单独给每个角设不同颜色，且圆角处仍是单色描边 - 在 flex 或 grid 容器里直接套用多重背景 → 若子项有
margin或gap，可能影响伪元素定位精度
真正要让每个圆角“各司其色”，核心不是调 border-radius，而是绕过它去控制视觉层的绘制顺序和区域。渐变方案简洁但依赖现代浏览器，伪元素方案啰嗦却可控——选哪个，取决于你项目里「兼容性」和「维护成本」谁更重。
