老师帮忙检查下
来源：2-13 编程练习
豆包侠
2021-11-18 14:35:02
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
background: #f3f3f3;
}
div:first-child{width:100px ;height: 200px;
margin: 0 auto;
transform: rotate(90deg)scale(1,-1);
border: 1px solid red;
border-radius: 0px 50px 20px 50px;
}
div:nth-child(2){width: 100px;height: 200px;margin: 0 auto;
border: 1px solid red;
border-radius: 0px 50px 50px 0px;
}
div:last-child{
width: 100px;height: 200px;
margin: 0 auto;
margin-top: 50px;
border: 1px solid red;
border-radius: 0px 40px 0px 40px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
1回答
-
同学你好，代码实现效果有点问题，建议优化如下：
1、给第一个div元素设置transform属性时，rotate与scale之间应该使用空格隔开，且scale缩放的取值不可以小于0，如图
2、选择最后一个div元素时，不建议使用:last-child，因为浏览器渲染时会在结尾默认生成script标签，导致div不再是最后一个子元素，也就无法选中该div元素，如图
3、同学绘制的形状与效果图不太相符，建议同学参考如下代码重新绘制一下
祝学习愉快！
1
相似问题