1. 线性渐变：

1.1 从左到右渐变

1.2 从下到上渐变

1.3 从左下角到右上角渐变

1.4 特定的角度渐变

1.5 多个颜色节点：【这个配色优点丑丑的】

1.6 使用rgba透明度：

1.7 重复渐变：【记得颜色和百分数之间是空格不是逗号；这个配色让我毛骨悚然】

1.8 具体案例用过的属性：

2. 径向渐变

2.1 两个颜色：

2.2 圆形：

2.3 椭圆形：

2.4 重复渐变：记得加repeating在前面

2.5 调整中心点的位置

1. 线性渐变：

 <div>123</div>

1.1 从左到右渐变

div {width: 200px;height: 200px;background-image: linear-gradient(to right, pink, yellow);
}

1.2 从下到上渐变

background-image: linear-gradient(to top, pink, yellow);

1.3 从左下角到右上角渐变

background-image: linear-gradient(to top right, pink, yellow);

1.4 特定的角度渐变

【角度无需记忆，可以自己控制台测试】

从下到上：0deg

background-image: linear-gradient(0deg, pink, yellow);

从左到右：90deg

background-image: linear-gradient(90deg, pink, yellow);

从左下到右上：45deg

background-image: linear-gradient(45deg, pink, yellow);

1.5 多个颜色节点：【这个配色优点丑丑的】

 background-image: linear-gradient(45deg, pink, yellow, blue);

1.6 使用rgba透明度：

background-image: linear-gradient(45deg, rgba(255, 255, 33, .4), rgba(255, 25, 33, .8));

1.7 重复渐变：【记得颜色和百分数之间是空格不是逗号；这个配色让我毛骨悚然】

 background-image: repeating-linear-gradient(45deg, yellow 10%, pink 20%)

1.8 具体案例用过的属性：

background-image: linear-gradient(transparent, rgba(0, 0, 0, .4));

2. 径向渐变

<div>123</div>

【径向渐变不设置角度】

2.1 两个颜色：

div {width: 200px;height: 300px;border-radius: 50%;background-image: radial-gradient(yellow, pink);
}

2.2 圆形：

background-image: radial-gradient(circle, red, blue);

2.3 椭圆形：

background-image: radial-gradient(ellipse, red, blue);

备注：

最好盒子的长度和宽度设置的差别大一些，这样circle和ellipse的差别会更加明显。

注意ellipse是径向渐变的默认值，表示椭圆形。

区别text-overflow：ellipsis这个属性；这个属性目的是文字溢出显示……

2.4 重复渐变：记得加repeating在前面

background-image: repeating-radial-gradient(ellipse, pink 10%, blue 15%);

2.5 调整中心点的位置

background-image: repeating-radial-gradient(ellipse at 30% 40%, pink 10%, blue 15%);

30% 是中心点的横坐标

40%是中心点的纵坐标

结尾：

学习id： 201903090124-9

现在是大三学生，学习到了前后端交互的npm阶段，如有不对的地方，欢迎指正，一起努力呀。如有转载请注明出处。

CSS【进阶】线性径向渐变background-image:linear-gradient()；background-image:radial-gradient()；相关推荐

CSS-0813(重复性)线性/径向渐变-过渡属性transition-变形属性transform变形位移旋转缩放倾斜视域函数perspective变形原点三角形居中方法
title: "CSS 0813-渐变&过渡&变形" date: 2022-08-15T09:43:28+08:00 文章目录 title: "CSS 0 ...
html css双色径向渐变,CSS 径向渐变
CSS 径向渐变 CSS 径向渐变 A radial gradient is defined by its center. To create a radial gradient you must a ...
CSS3，渐变效果（线性渐变，径向渐变，重复渐变），实现各种背景效果。
CSS3中的渐变实现(线性渐变.径向渐变) CSS3中的background新增属性实现,常见页面效果. CSS3中的图片边框的基本用法 CSS3中的transition属性,实现过渡效果. CSS3 ...
css3五花八门渐变之径向渐变【完美光晕效果】
CSS3 渐变(Gradients) CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果.但是,通过使用 CSS3 渐变(gra ...
css新特性：线性渐变详解(重复性线性渐变、径向渐变、重复性径向渐变的使用)
线性渐变线性渐变重复性线性渐变径向渐变重复性径向渐变的使用线性渐变线性渐变是向下.向上.向左.向右.对角方向的颜色渐变. 其语法格式为: background-image: linear- ...
CSS小技巧---线性渐变linear-gradient/径向渐变radial-gradient
文章目录前言普通渐变条纹条纹重复虚线斜向条纹三角形进度条动画 progress 网格圆点阵列波点图案前言本文主要介绍linear-gradient的使用方法,既有普通的用法,也 ...
CSS线性渐变和径向渐变详解
第九章:渐变色 1.线性渐变 1.1.什么是线性渐变 1.2线性渐变的写法 2.径向渐变 2.1什么是径向渐变 2.2径向渐变的写法总结 1.线性渐变 1.1.什么是线性渐变线性渐变,顾名思义就是 ...
CSS 3种渐变效果（线性渐变，径向渐变，圆锥型渐变）
1 linear-gradient(线性渐变) 1.1按方向渐变语法: background: linear-gradient(direction, color-stop1, color-stop2 ...
css渐变小案例，比较复杂的线性渐变和径向渐变做泡泡
目录一,前言二,案例一,多个镜像渐变复合出图像 1.分析 2.第一步,四角的白色与红色条纹. 3.第二步,从上到下的渐变 4.第四步,后面的蓝红条纹效果 5.源码 6.奇思妙想三,径向渐变做出好 ...

CSS【进阶】线性径向渐变background-image:linear-gradient()；background-image:radial-gradient()；

1. 线性渐变：

1.1 从左到右渐变

1.2 从下到上渐变

1.3 从左下角到右上角渐变

1.4 特定的角度渐变

1.5 多个颜色节点：【这个配色优点丑丑的】

1.6 使用rgba透明度：

1.7 重复渐变：【记得颜色和百分数之间是空格不是逗号；这个配色让我毛骨悚然】

1.8 具体案例用过的属性：

2. 径向渐变

2.1 两个颜色：

2.2 圆形：

2.3 椭圆形：

2.4 重复渐变：记得加repeating在前面

2.5 调整中心点的位置

CSS【进阶】线性径向渐变background-image:linear-gradient()；background-image:radial-gradient()；相关推荐

最新文章

热门文章