倾斜按钮（径向渐变详细介绍）

代码解释：带装饰性圆角的按钮

使用径向渐变在按钮的左右两侧添加了圆角装饰。

结构分析

HTML部分

<template><div class="container"><span>按钮</span></div>
</template>

• 创建一个包含"按钮"文本的简单div容器

CSS部分

主容器样式

.container {width: 100px;height: 50px;background: #4e8cff;position: relative;top: 50%;left: 50%;line-height: 50px;text-align: center;color: white;border-radius: 20px 0 20px 0;margin-top: 100px;
}

• 设置按钮尺寸为100×50px
• 蓝色背景(#4e8cff)
• 相对定位，并居中显示(top/left 50%)
• 文字居中，白色
• 特殊圆角：左上和右下角有20px圆角，其他角直角
• 顶部外边距100px

左侧装饰(:before伪元素)

.container:before {content: '';width: 20px;height: 20px;position: absolute;bottom: 0;left: -20px;background: radial-gradient(circle at 0 0,white 20px,#4e8cff 21px);
}

• 创建20×20px的方形元素
• 绝对定位在按钮左侧(left: -20px)
• 使用径向渐变创建效果：
  • 圆心在左上角(0 0)
  • 20px半径内为白色
  • 21px处过渡到按钮背景色
• 效果：看起来像是按钮左下角的延伸圆角

右侧装饰(:after伪元素)

.container:after {content: '';width: 20px;height: 20px;position: absolute;top: 0;right: -20px;background: radial-gradient(circle at 100% 100%,white 20px,#4e8cff 21px);
}

• 创建20×20px的方形元素
• 绝对定位在按钮右侧(right: -20px)
• 使用径向渐变创建效果：
  • 圆心在右下角(100% 100%)
  • 20px半径内为白色
  • 21px处过渡到按钮背景色
• 效果：看起来像是按钮右上角的延伸圆角

<template><div class="container"><span>按钮</span></div>
</template><script setup>
// 无需特殊 JS
</script><style scoped>
.container {width: 100px;height: 50px;background: #4e8cff;position: relative;top: 50%;left: 50%;line-height: 50px;text-align: center;color: white;border-radius: 20px 0 20px 0;margin-top: 100px;
}.container:before {content: '';width: 20px;height: 20px;position: absolute;bottom: 0;left: -20px;background: radial-gradient(circle at 0 0,white 20px,#4e8cff 20px);
}.container:after {content: '';width: 20px;height: 20px;position: absolute;top: 0;right: -20px;background: radial-gradient(circle at 100% 100%,white 20px,#4e8cff 20px);
}
</style>

径向渐变 (Radial Gradient) 详细介绍

径向渐变是一种从中心点向外辐射的颜色过渡效果，与线性渐变的直线过渡不同，它呈现出圆形或椭圆形的颜色扩散模式。

基本概念

核心特点

1. 中心辐射：颜色从中心点向四周均匀扩散
2. 形状可变：可以是正圆形或椭圆形
3. 多色支持：可以设置多个颜色过渡点
4. 尺寸可控：可以定义渐变的结束边界

CSS 中的径向渐变语法

完整语法：

background: radial-gradient([ <shape> || <size> ]? [ at <position> ]? ,<color-stop-list>
);

参数详解

1. 形状 (shape)

• circle：正圆形渐变
• ellipse：椭圆形渐变（默认值）

2. 尺寸 (size)

• 具体数值：20px（圆形半径）或 20px 30px（椭圆x/y半径）
• 关键字：
  • closest-side：渐变结束于离中心最近的边
  • farthest-side：渐变结束于离中心最远的边
  • closest-corner：渐变结束于离中心最近的角
  • farthest-corner：渐变结束于离中心最远的角（默认）

3. 位置 (position)

• 定义中心点位置，语法同background-position
• 示例：at top left、at 30% 60px

4. 颜色停止点 (color-stop)

• 格式：<color> [<percentage> | <length>]?
• 示例：red、blue 30%、rgba(0,0,0,0.5) 20px

实际应用示例

1. 基础径向渐变

.element {background: radial-gradient(red, blue);
}

从中心红色过渡到边缘蓝色

2. 指定形状和位置

.element {background: radial-gradient(circle at bottom right, yellow, green);
}

在右下角开始的圆形渐变

3. 复杂渐变

.element {background: radial-gradient(ellipse 200px 100px at 30% 40%,red 0%,orange 20%,yellow 40%,green 60%,blue 80%,purple 100%);
}

自定义椭圆大小和位置的多色渐变

4. 硬边渐变

.element {background: radial-gradient(circle,white 0%,white 70%,black 70%,black 100%);
}

创建类似靶心的硬边过渡效果

高级技巧

1. 多重径向渐变

.element {background: radial-gradient(circle at 20% 30%, red, transparent 50%),radial-gradient(circle at 80% 70%, blue, transparent 50%);
}

叠加多个渐变创建复杂效果

2. 模拟光照效果

.button {background: radial-gradient(circle at 20% 20%, white, transparent 30%),linear-gradient(to bottom, #4e8cff, #2a65df);
}

创建按钮高光效果

3. 创建球形效果

.sphere {background: radial-gradient(circle at 30% 30%,white,#ccc 20%,#666 50%,#222 80%,black 100%);border-radius: 50%;
}

模拟3D球体光照