3-2作业提交

来源:3-2 编程练习

qq_慕斯7214945

2020-08-24 21:32:11

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>线性渐变</title>

    <style type="text/css">

    /*此处写代码*/

     div{

            width: 200px;

            height: 200px;

        }

        div.one,

        div.two,

        div.three{

            float: left;

            margin-right: 20px;

        }

        div.one div{

            background:-webkit-linear-gradient(yellow,red);

            background:   -moz-linear-gradient(yellow,red);

            background:     -o-linear-gradient(yellow,red);

            background:        linear-gradient(yellow,red);

        }

        div.two div{

            background:-webkit-linear-gradient(left, yellow,red);

            background:   -moz-linear-gradient(right,yellow,red);

            background:     -o-linear-gradient(right,yellow,red);

            background:        linear-gradient(to right,yellow,red);

        }

        div.three div{

            background:-webkit-linear-gradient(      left top, yellow,red);

            background:   -moz-linear-gradient(   right bottom,yellow,red);

            background:     -o-linear-gradient(   right bottom,yellow,red);

            background:        linear-gradient(to right bottom,yellow,red);

        }

    </style>

</head>

<body>

    <!--此处写代码-->

    <div class="one">

        <p>上下方向渐变</p>

        <div></div>

    </div>

    <div class="two">

        <p>左右方向渐变</p>

        <div></div>

    </div>

    <div class="three">

        <p>对角方向渐变</p>

        <div></div>

    </div>

</html>


写回答

1回答

好帮手慕言

2020-08-25

同学你好,第三个div元素是从左上角到右下角发生渐变,颜色由红色变为黄色,测试同学的代码,效果是黄色变为红色,颜色位置可以调换一下

http://img.mukewang.com/climg/5f44728109150e1803060108.jpg

如果我的回答帮到了你,欢迎采纳,祝学习愉快~

0

0 学习 · 40143 问题

查看课程

相似问题