标签导航：

巧妙运用css径向渐变实现单边圆角和单边切角的组合效果

许多网页设计需要创建独特的形状，例如同时拥有圆角和切角的元素。border-radius 属性只能创建全圆角或对称切角，那么如何才能实现一边是切角一边是圆角的非对称效果呢？本文将介绍一种利用径向渐变 (radial-gradient) 实现此效果的方法。

目标是创建一个一边是切角，一边是圆角的边框样式。标准 CSS 属性难以直接实现这种不对称形状。

解决方案是巧妙地运用径向渐变。通过调整径向渐变的起始点、形状和颜色，我们可以模拟出切角效果。

具体实现步骤如下：

首先，准备一个包含文本的 div 元素：

<div class="cor">202201马勒卡</div>
<div class="cor">202201马勒卡马勒卡马勒卡</div>

然后，使用 CSS 定义 .cor 类的样式：

.cor {
    line-height: 48px;
    padding: 0 20px 0 30px;
    background: radial-gradient(circle at -30px center, transparent 40px, orange 0);
    border-radius: 0 30px 30px 0;
    color: #fff;
}

代码中，radial-gradient(circle at -30px center, transparent 40px, orange 0) 定义了一个圆形径向渐变。circle at -30px center 指定渐变中心点位于元素左侧 30 像素处。transparent 40px, orange 0 表示渐变从透明色（40 像素半径）过渡到橙色（0 像素半径），从而在左侧创建一个透明的切角区域。border-radius: 0 30px 30px 0; 设置右下角的圆角。

通过调整 radial-gradient 参数，例如渐变中心点位置和透明区域半径，可以微调切角和圆角的形状和大小，从而达到理想的视觉效果。 此方法的关键在于巧妙地利用径向渐变模拟切角，并结合 border-radius 实现圆角。 (此处应插入示例图片，但原文未提供，故无法添加。)

CSS如何实现单边圆角和单边切角的组合效果？