请老师检查一下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圆弧制作</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 200px;
            height: 100px;
            border: 2px solid red;
            margin: 100px auto;
        }

        div:nth-child(1) {
            border-radius: 0 50px 10px 50px/ 0 50px 40px 50px;
        }

        div:nth-child(2) {
            border-radius: 200px 400px 10px 60px/ 200px 400px 100px 60px;
            transform: rotate(90deg);
        }

        div:nth-child(3) {
            border-radius: 45px 13px;
            transform: rotate(90deg);
            position: relative;
            top: 50px;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

请老师检查一下是否还有地方可以修改优化的。
为啥第二个和第三个div上下的margin值好像不起作用？是因为使用了transform吗？还是什么原因呀？

粉墨登场 2020-09-03

源自：项目：CSS3实现汉克狗案例 2-13 编程练习

收起

4回答

好帮手慕星星回答被采纳获得+3积分 2020-09-04 10:01:36

同学你好，代码实现效果可以，不需要优化了。另外，对于margin值理解的也没有问题，很棒。

祝学习愉快！

收起回答

粉墨登场提问者 #1

但是为啥单独用伪类给第二个div设置margin-top没有覆盖之前给所有div设置的margin值呀？伪类加标签选择器权重应该大过一个单独的标签的选择器的

2020-09-04 12:42:08

提问者粉墨登场 2020-09-04 10:12:21

但是为啥单独用伪类给第二个div设置margin-top没有覆盖之前给所有div设置的margin值呀？伪类加标签选择器权重应该大过一个单独的标签的选择器的

收起回答

提问者粉墨登场 2020-09-03 21:04:05

不对老师，我明白了。首先每个div都有上下margin值。但是第二个和第三个div因为设置了rotate旋转，所以导致看起来像是margin值无效，但其实上下100的margin值依旧有效。所以如果再次设置的上下margin值没有超过100px，那便是无效的，必须大于100才会有效果。我再次设置的是50px，我说为什么没有效果呢。

收起回答