
CSS3 渐变
CSS3 渐变(gradients
)允许你在元素背景中创建平滑的过渡颜色效果,而无需使用图像。
CSS3 定义了两种主要的渐变(gradients
)类型:
- 线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向
- 径向渐变(Radial Gradients)- 由它们的中心定义
线性渐变 (Linear Gradients)
CSS3 中background-clip
属性,用于控制背景的绘制区域(背景延伸到何处)。
.gradient1 {
background: linear-gradient(to right, #ff7e5f, #feb47b);
}
.gradient2 {
background: linear-gradient(to bottom right, #4b6cb7, #182848);
}
.gradient3 {
background: linear-gradient(45deg, #11998e, #38ef7d);
}
.gradient4 {
background: linear-gradient(to right, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);
}
.gradient5 {
background: linear-gradient(to bottom, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0.1));
}
.gradient6 {
background: repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px);
}
实现的效果:
从左到右渐变
对角渐变
45度角渐变
彩虹渐变
透明度渐变
重复线性渐变(条纹)
径向渐变 (Radial Gradients)
CSS3 中background-clip
属性,用于控制背景的绘制区域(背景延伸到何处)。
.gradient1 {
background: radial-gradient(at top left, #ffecd2, #fcb69f);
}
.gradient2 {
background: radial-gradient(closest-side at 30% 60%, #84fab0, #8fd3f4);
}
.gradient3 {
radial-gradient(ellipse 100% 50% at center, #a6c1ee, #fbc2eb);
}
.gradient4 {
background: radial-gradient(circle, rgb(255, 0, 0), rgb(255, 127, 0) 25%, rgb(255, 255, 0) 50%, rgb(0, 255, 0) 75%, rgb(0, 0, 255));
}
.gradient5 {
background: repeating-radial-gradient(circle, rgb(91, 127, 255), rgb(91, 127, 255) 10px, rgb(51, 204, 255) 10px, rgb(51, 204, 255) 20px);
}
.gradient6 {
background: radial-gradient(circle farthest-corner at 20% 30%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.5) 30%, rgba(0, 0, 0, 0) 60%), radial-gradient(ellipse at 70% 50%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.5) 30%, rgba(0, 0, 0, 0) 80%), #3a7bd5;
}
实现的效果:
左上角开始的渐变
指定位置和大小
椭圆大小渐变
多色径向渐变
重复径向渐变
复杂组合渐变
教程介绍
CSS3 是 CSS 技术的版本升级,在 CSS 基础上进行了扩展改进,引入了新的特性和模块。
36
章节
79
阅读
0
评论
反馈提交成功
感谢您的反馈,我们将尽快处理您的反馈