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...);

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Datalist</title>
</head>
<style type="text/css">
    div{
        height: 500px;
        width: 500px;
        background:black;
        background-size:100px 100px;
        background-image: -webkit-linear-gradient(45deg,red 25%,transparent 25%),
                          -webkit-linear-gradient(-45deg,red 25%,transparent 25%),
                          -webkit-linear-gradient(45deg,transparent 75%,red 75%),
                          -webkit-linear-gradient(-45deg,transparent 75%,red 75%);
        background-image: -moz-linear-gradient(45deg,red 25%,transparent 25%),
                          -moz-linear-gradient(-45deg,red 25%,transparent 25%),
                          -moz-linear-gradient(45deg,transparent 75%,red 75%),
                          -moz-linear-gradient(-45deg,transparent 75%,red 75%);                             
        background-image: -o-linear-gradient(45deg,red 25%,transparent 25%),
                          -o-linear-gradient(-45deg,red 25%,transparent 25%),
                          -o-linear-gradient(45deg,transparent 75%,red 75%),
                          -o-linear-gradient(-45deg,transparent 75%,red 75%);                               
        background-image: linear-gradient(45deg,red 25%,transparent 25%),
                          linear-gradient(-45deg,red 25%,transparent 25%),
                          linear-gradient(45deg,transparent 75%,red 75%),
                          linear-gradient(-45deg,transparent 75%,red 75%);

    }
</style>
<body>
    <div>
        
    </div>
</body>
</html>

image.png