background部分总结

background:linear-gradient([position],color px......)  线性背景

还可以有一种写法:

background:-webkit-linear-gradient(to [position],color px)  不推荐这种写法

demo如下:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .app{
            width: 300px;
            height: 300px;
            

        }
        /*linear-gradient([位置] , [开始点颜色   占用多少位置], [结束点颜色  过渡大小])*/
        .app{
            background: 
            -webkit-linear-gradient( 135deg,  transparent 100px, deeppink 0);
            background: 
            -moz-linear-gradient( 135deg, red 0 , white 0);
        }
    </style>
</head>
<body>
   <div class="app"></div>
</body>
</html>
 

(效果如上)ps:有时候使用透明(transparent)会有意想不到的效果

原文地址:https://www.cnblogs.com/claireyu1219/p/6392361.html