背景高级和渐变总结

切割背景图片的范围

Background-clip:border-box/padding-box/content-box

设置背景图片从哪里开始放，默认从padding开始

Background-origin:border-box/padding-box/content-box

设置背景图片的大小，cover是根据父盒子的大小平铺，而contain是比如宽先达到父盒子的宽度，高没有达到，高就此为止，不在平铺。

Background-size:百分数，像素数，cover，contain

 

渐变分为线性渐变和径向渐变它们作为背景而显示，兼容性比较差，它们只到IE10，IE10以下不支持。它们都得必须含有两个颜色。透明色为：transparent。

线性渐变:linear-gradient()默认行上往下

Linear-gradient(to 方向，颜色1  百分数，颜色2，百分数，.....)

这里的方向可以用deg(度数) 0deg是从下往上，度数可以为负值，正值是顺时针，负值是逆时针。

径向渐变:radial-gradient()默认从中心向四周渐变。

Radial-gradient(at 径向渐变中心的位置，颜色1，颜色2，....)

可以设置渐变的形状：circle和ellipse圆和椭圆