主题
  • 默认模式
  • 浅蓝色模式
  • 淡绿色模式
  • 深夜模式

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;
}

实现的效果:

左上角开始的渐变
指定位置和大小
椭圆大小渐变
多色径向渐变
重复径向渐变
复杂组合渐变



评论区 0
发表评论



留下您的精彩评论吧