CSS 渐变背景之线性渐变

CSS 渐变可以显示两种或多种指定颜色之间的平滑过渡。

CSS 定义了两种渐变类型：

线性渐变（向下/向上/向左/向右/对角线）
径向渐变（由其中心定义）

这里讲径向渐变

CSS 径向渐变

径向渐变由其中心定义。

如需创建径向渐变，还必须定义至少两个色标。

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

值	描述
shape	确定圆的类型: ellipse (默认): 指定椭圆形的径向渐变。 circle ：指定圆形的径向渐变
size	定义渐变的大小，可能值： farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角 closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边 closest-corner ：指定径向渐变的半径长度为从圆心到离圆心最近的角 farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边
position	定义渐变的位置。可能值： center（默认）：设置中间为径向渐变圆心的纵坐标值。 top：设置顶部为径向渐变圆心的纵坐标值。 bottom：设置底部为径向渐变圆心的纵坐标值。
start-color, ..., last-color	用于指定渐变的起止颜色。

径向渐变-均匀间隔的色标（默认）

#grad {background-image: radial-gradient(red, yellow, green);
}

径向渐变-不同间距的色标

#grad {background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}

设置形状

shape 参数定义形状。它可接受 circle 或 ellipse 值。默认值为 ellipse（椭圆）。

#grad {background-image: radial-gradient(circle, red, yellow, green);
}

使用大小不同的关键字

size 参数定义渐变的大小。它可接受四个值：

closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边
farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边
closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角

设置了不同 size 关键词的径向渐变：

#grad1 {background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
} #grad2 {background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}

at 之后的的数值表示圆心位置，第一个值确定圆心的水平坐标，第二个值确定圆心的竖直坐标

重复径向渐变

repeating-radial-gradient() 函数用于重复径向渐变：

#grad {background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}

green 15% 改为 green 35%：

CSS 渐变背景之线性渐变相关推荐

html背景色线性渐变,css中背景颜色线性渐变和径向渐变效果的示例分析
css中背景颜色线性渐变和径向渐变效果的示例分析发布时间:2021-06-04 14:00:26 来源:亿速云阅读:80 作者:小新这篇文章将为大家详细讲解有关css中背景颜色线性渐变和径向渐变 ...
CSS 背景色背景图片渐变背景 - 重复线性渐变 background-image: repeating-linear-gradient()
repeating-linear-gradient() 用来生成重复的线性渐变图案基础语法 background-image: repeating-linear-gradient(angleValu ...
php渐变背景颜色,css背景颜色渐变案例：线性渐变和径向渐变效果实例详解
渐变是两种或多种颜色之间的平滑过渡.以前,必须使用图像来实现这些效果.但是,通过使用 CSS3 渐变(gradients),可以减少下载的事件和宽带的使用.此外,渐变效果的元素在放大时看起来效果更好, ...
css新特性：线性渐变详解(重复性线性渐变、径向渐变、重复性径向渐变的使用)
线性渐变线性渐变重复性线性渐变径向渐变重复性径向渐变的使用线性渐变线性渐变是向下.向上.向左.向右.对角方向的颜色渐变. 其语法格式为: background-image: linear- ...
CSS3渐变属性：线性渐变和径向渐变用法教程
在CSS3之前如果需要添加渐变效果,通常要设置背景图像来实现.而CSS3中增加了渐变属性,通过渐变属性可以轻松实现渐变效果.CSS3的渐变属性主要包括线性渐变和径向渐变,本文转自黑马程序员前端培训课程 ...
pyecharts 主题：颜色渐变实例（线性渐变）
效果配置项:pyecharts官网--ItemStyleOpts:图元样式配置项代码位置完整代码 from pyecharts import options as opts from pyech ...
android设置渐变背景,Android LinearLayout渐变背景
我在将渐变背景应用于LinearLayout时遇到问题. 根据我所读的内容,这应该相对简单,但似乎不起作用. 作为参考,我正在开发2.1-update1. header_bg.xml: android ...
【Android UI】Paint Gradient 渐变渲染 ① ( LinearGradient 线性渐变渲染 | 设置渲染方向 | 设置渲染颜色 | 设置渲染模式 | MIRROR )
文章目录一.LinearGradient 线性渐变渲染 1.设置 2 个颜色的渐变 3.设置多个颜色的渐变二.LinearGradient 线性渐变渲染重要参数分析 1.正常渲染 2.设置多个渐变 ...
CSS 背景色背景图片渐变背景 - 径向渐变 background-image:radial-gradient()
radial-gradient() 用来生成径向渐变的图片基础语法 background-image: radial-gradient(shape extent at positionX posit ...
深入理解CSS线性渐变linear-gradient
前面的话在CSS3出现之前,渐变效果只能通过图形软件设计图片来实现,可拓展性差,还影响性能.如今已经进入CSS3标准的渐变可以很轻松的完成渐变效果.渐变实际上分为线性渐变和径向渐变两种,本文介绍线性 ...

CSS 渐变背景之线性渐变

CSS 径向渐变

径向渐变-均匀间隔的色标（默认）

径向渐变-不同间距的色标

设置形状

使用大小不同的关键字

重复径向渐变

CSS 渐变背景之线性渐变相关推荐

最新文章

热门文章

CSS 渐变背景 之 线性渐变

CSS 径向渐变

径向渐变-均匀间隔的色标（默认）

径向渐变-不同间距的色标

设置形状

使用大小不同的关键字

重复径向渐变

CSS 渐变背景 之 线性渐变相关推荐

最新文章

热门文章

CSS 渐变背景之线性渐变

CSS 渐变背景之线性渐变相关推荐