这样可以吗?3-2

来源:3-2 编程练习

慕言_7946275

2019-07-23 14:20:26

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>线性渐变</title>
    <style type="text/css">
    /*此处写代码*/
    *{padding:0;
        margin:0;
    }
   div{width:120px;
        height:120px;
        float:left;
        margin-right:30px;
        
    }
    p{text-align:center;
      margin:20px auto;
      font-size:14px;
      font-weight:bold;
      
       
    }
    .box1{background:linear-gradient(yellow,red);}
    .box2{background:linear-gradient(to right,yellow,red);}
    .box3{background:linear-gradient(to right bottom,red,yellow);}
    </style>
</head>
<body>
    <div>
        <p>上下方向渐变</p>
        <div class="box1"></div>
    </div>
    
    <div>
        <p>左右方向渐变</p>
        <div class="box2"></div>
    </div>
    
    <div>
        <p>对角方向渐变</p>
        <div class="box3"></div>
    </div>
    <!--此处写代码-->
</html>


写回答

1回答

樱桃小胖子

2019-07-23

效果实现的是可以的,代码也很简洁,棒棒哒,继续加油哦!

0

0 学习 · 40143 问题

查看课程