html中如何做背景渐变,html如何设置背景径向渐变

在html中,可以使用radial-gradient函数设置径向渐变,只需要在元素background属性里加入“background:radial-gradient(起始位置, 形状,大小, 颜色,颜色,颜色)”即可。

html中如何做背景渐变,html如何设置背景径向渐变_第1张图片

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

径向渐变:从一个点到四周的颜色的过渡变化。

径向渐变如图所示:

html中如何做背景渐变,html如何设置背景径向渐变_第2张图片

语法:(必须加浏览器前缀)background: radial-gradient(center, shape, size, start-color, ..., last-color);

center:渐变起点的位置,可以为百分比,默认是图形的正中心。

shape:渐变的形状,ellipse表示椭圆形,circle表示圆形。默认为ellipse,如果元素形状为正方形的元素,则ellipse和circle显示一样。

size:关于径向渐变的大小:

closest-side 最近边

farthest-side 最远边

c

你可能感兴趣的:(html中如何做背景渐变)