背景渐变色

阅读量: 125 编辑

背景渐变色

一、代码案例

background-color                                            //背景色
background: linear-gradient(red,green,blue)    //渐变背景色

box-shadow: 0 4px 8px 0 rgba(7,17,27,.1);      //阴影
transition: .3s all linear;                                   //动画效果

二、代码实战

代码的详细解读,可以参考视频教程

文件:08.css

.mydiv{
    width: 100px;
    height: 100px;
    background:linear-gradient(#ff6666,#6666ff);
    box-shadow: 0px 4px 8px 2px rgba(10,10,10,0.9);
    transition: .3s all linear;
}

文件:08.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>背景色</title>
        
        <link href="08.css" type="text/css" rel="stylesheet">
        
        <!--
        <style type="text/css">
            .mydiv{
                width: 100px;
                height: 100px;
                background:linear-gradient(#ff6666,#6666ff);
                box-shadow: 0px 4px 8px 2px rgba(10,10,10,0.9);
                transition: .3s all linear;
            }

        </style>-->

    </head>
    
    <body>
        <div class="mydiv">我是div</div>
    </body>
    
</html>