首页 > 代码库 > background部分总结

background部分总结

2024-09-04 02:52:57   238人阅读

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)会有意想不到的效果

 

background部分总结


联系
我们