linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果。
上图是从黄色渐变到绿色
background:linear-gradient(
to right 表示方向（left top right left 或者用度数表示）
yellow,渐变其实颜色
green 渐变终止颜色
);
background : linear-gradient (
to right ,
red 0%, red 25% ,
blue 25%, blue 50%,
green 50%, green 75%,
pink 75% , pink 100%
); //起止颜色，终止颜色.
background : linear-gradient (
135 deg ,
black 25%,
transparent 25%,
transparent 50%,
black 50%,
black 75%,
transparent 75%
);
background-size : 100 px 100 px ;
animation : move 1 s linear infinite ;
@keyframes move {
from {}
to {
background-position : 100 px 0;
}
}
1、必要地 元素
方向
气质颜色
终止色
2.径向渐变（radial径向）
radial-gradient(径向渐变指从一个中心开始沿着四周产生渐变效果)
background:radial-gradient(
150px at center
yellow,
green
);
//围绕中心点做渐变，半径是150px，从黄颜色到绿颜色做渐变.
1、必要的元素：
a、辐射范围即圆半径 (半径越大，渐变效果越大)
b、中心点 即圆的中心 (中心点的位置是以盒子自身)
background: radial-gradient(
150px at left center,
yellow,
green
);
以左上角为圆的中心点
background: radial-gradient(
150px at 0px 0px,
yellow,
green
);
c、渐变起始色
d、渐变终止色
2、关于中心点：中心位置参照的是盒子的左上角
3、关于辐射范围：其半径可以不等，即可以是椭圆
div {
width : 300 px ;
height : 300 px ;
margin :100 px auto ;
background : radial-gradient (
250 px at 0 px 0 px ,
yellow ,
green
);
border-radius : 150 px ;
}
3.背景
背景在css中也得到很大程度的增强，比如背景图片的尺寸、背景裁切区域，背景定位参照点、多重背景等。
background-size：width,height 可以设置背景图片的宽度以及高度
1、 background-size设置背景图片的尺寸
background-size:600px,auto;
自动是适应盒子的宽度
background-size: 100% auto; 当宽度发送改变时，高度会有内容溢出。
常规用法，通过百分百，和像素来调整背景的尺寸.
background-size : auto 100%;
cover会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。
整个背景图片完整显示在背景区域.
contain会自动调整缩放比例，保证图片始终完整显示在背景区域。
也可以使用长度单位或百分比
2、background-origin(原点，起点)
设置背景定位的原点
所谓的背景原点就是背景位置的一个参照点
调整背景定位的参照原点
background-repeat: no-repeat;
查看更多关于css渐变/背景_html/css_WEB-ITnose的详细内容...