老师帮忙检查下代码，看看还有没有需要优化的地方。谢谢

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        width: 680px;
        height: 200px;
    }
    .one,.two,.three{
        float: left;
        text-align: center;
        margin-right: 20px;
    }
    .box1 {
        width: 200px;
        height: 200px;
        background-image: -webkit-linear-gradient( top, red,yellow);
    }

    .box2 {
        width: 200px;
        height: 200px;
        background-image: -webkit-linear-gradient(left, red, yellow);
    }

    .box3 {
        width: 200px;
        height: 200px;
        background-image: linear-gradient(300deg ,yellow, red);
    }
</style>

<body>
    <div class="box">
        <div class="one">
            <h3>上下方向渐变</h3>
            <div class="box1"></div>
        </div>
        <div class="two">
            <h3>左右方向渐变</h3>
            <div class="box2"></div>
        </div>
        <div class="three">
            <h3>对交方向渐变</h3>
            <div class="box3"></div>
        </div>
    </div>
</body>

</html>

雨过便是彩虹 2021-10-15

源自：背景与渐变 2-24 编程练习

收起

1回答

好帮手慕小李 2021-10-16 11:20:00

同学你好，作业完成的很好，不足的是没有完全按照任务要求来，优化建议如下：

1、把颜色顺序改过来

2、按照任务图把文字与div之间的间距调出来，文字也不是加粗~

任务图片如下：

建议，文字用p标签，然后给文字下外边距10像素。

css可以把box1 box2 box3 的宽度高度提出来这样就不用每个里面都写宽高啦~

3、box3 中的渐变角度应为315度如下图

祝学习愉快~

收起回答

提问者雨过便是彩虹 #1

老师最后那个变角是怎么看角度的？我调到300的时候基本都看不出来区别了。如何准确地确定角度？

2021-10-16 12:28:10
好帮手慕小李回复提问者雨过便是彩虹 #2

同学你好，下图是0度到365度的一个渐变参考图(0-90、90-180、180-270 270-360的表现):
那么如作业任务中看到的样子，是从270度开始的对角线，所以我们按照270 + 45 就可以算出正好的315度了，这样的方法就可以很精确，不用同学再做调整。
祝学习愉快~

2021-10-16 13:41:28