第九讲_css渐变

css渐变

1. 渐变的作用
2. 渐变的类型
- 2.1 线性渐变
- 2.2 环形渐变

1. 渐变的作用

CSS3 渐变（Gradients）可以让两个或多个指定的颜色之间的显示平稳的过渡。

2. 渐变的类型

渐变（Gradients）分为线性渐变（Linear Gradients）和环形渐变（Radial Gradients）。

2.1 线性渐变

线性渐变（Linear Gradients）可以从上往下、从下往上、从左往右、从右往左、指定对角方向，进行渐变。

<html><style>div {margin-bottom: 10px;width: 200px;height: 200px;}.div1 {/* 默认是从上往下的渐变，可以指定n个颜色*/background-image: linear-gradient(red, green, blue, #fa7e23);}.div2 {/* 第一个参数：to top 指定从下往上渐变 */background-image: linear-gradient(to top, red, green, blue, #fa7e23);}.div3 {/* 第一个参数：to right 指定从左往右渐变 */background-image: linear-gradient(to right, red, green, blue, #fa7e23);}.div4 {/* 第一个参数：to left 指定从右往左渐变 */background-image: linear-gradient(to left, red, green, blue, #fa7e23);}.div5 {/* 旋转指定角度*//* 指定 0deg 等价于从下往上 *//* 指定 90deg 等价于从左往右 *//* 指定 180deg 等价于从上往下 *//* 指定 270deg 等价于从右往左 */background-image: linear-gradient(270deg, red, green, blue, #fa7e23);}.div6 {/* 从上向下的渐变，指定从什么位置开始渐变*//* 例如：0-50px都是红色，从50px开始渐变 */background-image: linear-gradient(red 50px, green 100px, blue, #fa7e23);}</style><div class="div1"></div><div class="div2"></div><div class="div3"></div><div class="div4"></div><div class="div5"></div><div class="div6"></div>
</html>

2.2 环形渐变

环形渐变（Radial Gradients）由定义的中心点，以环状进行渐变。

<html><style>div {margin-bottom: 10px;width: 200px;height: 200px;}.div1 {/* 默认的中心点是盒子的中心 */background-image: radial-gradient(red, green, blue, #fa7e23);}.div2 {/* 指定中心的位置通过（top，bottom，right，left） *//* at right：表示中心点在右边线的中点 *//* at right top：表示中心点在右上顶角 */background-image: radial-gradient(at right,red,green,blue,#fa7e23);}.div3 {/* 指定中心的位置通过像素 *//* 参照点是左上顶角，左上顶角为0px 0px */background-image: radial-gradient(at 10px 10px,red,green,blue,#fa7e23);}.div4 {/* 设置渐变的环形为正圆*/background-image: radial-gradient(circle,red,green,blue,#fa7e23);}.div5 {/* 设置渐变的环形半径，x和y，如果x=y就是正圆 */background-image: radial-gradient(50px 50px,red,green,blue,#fa7e23);}.div6 {/* 指定位置开始渐变 */background-image: radial-gradient(red 50px,green 100px,blue,#fa7e23);}</style><div class="div1"></div><div class="div2"></div><div class="div3"></div><div class="div4"></div><div class="div5"></div><div class="div6"></div>
</html>