第九讲_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>
ps：渐变支持所有颜色表示法，不熟悉颜色表示的可以阅读这边博文，里面有详细的介绍：css颜色表示法
另外给大家推荐一个好用的渐变色工具，里面提供了很多漂亮的渐变配色：渐变色工具