2019-05-19CSS3背景与渐变

CSS3背景图像区域

background-clip属性

指定背景绘制区域

background-clip:border-box|padding-box|content-box;
background-clip:边框盒子|内边距盒子|内容盒子;
兼容ie9+，其他浏览器都兼容

background-origin属性

指定background-position属性应该是相对位置
兼容：ie9+，火狐4+，Safari5+

background-size

指定背景图片的大小
兼容：ie9+，火狐4+，Safari5+

CSS3渐变

兼容性：ie10+，火狐16+，Chrome26+，Safari6.1+，欧朋12.1+

线性渐变

沿着一条轴线改变颜色，从一边拉到另外一边

background:linear-gradient(direction,color-stop1,color-stop2,....)
默认从上到下渐变

background:linear-gradient(angle,color-stop1,color-stop2,....)
角度是指水平线和渐变线之间的角度，逆时针方向计算。

background: webkit-linear-gradient(angle,color-stop1,color-stop2,....)
background:linear-gradient(angle,color-stop1,color-stop2,....)
为了避免不必要的问题，这两个一般一起写。

重复渐变

比如想让后两个颜色相间重复存在

background:repeating-linear-gradient(color1 length|percentage ,color2 length|percentage...);

径向渐变

从起点到终点由内向外散开，由半径散播

background:radial-gradient(color-stop1,color-stop2...)
默认颜色节点均匀分布

background:radial-gradient(color-stop1 length|percentage ,color-stop2 length|percentage ...)
默认颜色节点不均匀分布

设置形状

background:radial-gradient(shape color-stop1,color-stop2...)
shape :circle圆形 ellipse椭圆

设置尺寸大小关键字

background:radial-gradient(size color-stop1,color-stop2...)
size：closest-side最近边 farthest-side最远边closest-corner最近角 farthest-corner最远角

径向重复渐变

background:repeating-radial-gradient(color1 length|percentage ,color2 length|percentage...);

案例：

image.png