老师，请检查。
来源：2-13 编程练习
阿惹
2021-12-07 20:56:32
<!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>
<style>
.flag{
width: 600px;
height: 400px;
background-color: red;
margin: 0 auto;
position: relative;
}
.star{
position: absolute;
left: 90px;
top: 120px;
width: 0;
height: 0;
border: 30px solid transparent;
border-top: 20px solid yellow;
}
.star::before{
content:"";
position: absolute;
left: -43px;
top:-28px ;
border: 30px solid transparent;
border-top: 20px solid yellow;
transform: rotate(70deg);
}
.star::after{
content:"";
position: absolute;
top: -29px;
left: -18px;
border: 30px solid transparent;
border-top: 20px solid yellow;
transform: rotate(292deg);
}
.one{
transform:scale(2);
}
.two{
left: 195px;
top: 27px;
transform:rotate(25deg) scale(0.5);
/* transform: scale(0.5);
transform: rotate(25deg); */
}
.three{
transform:rotate(337deg) scale(0.5);
left: 233px;
top: 85px;
}
.four{
transform:rotate(8deg) scale(0.5);
left: 233px;
top: 143px;
}
.five{
transform:rotate(26deg) scale(0.5);
left: 199px;
top: 188px;
}
</style>
</head>
<body>
<div class="flag">
<div class="star one"></div>
<div class="star two"></div>
<div class="star three"></div>
<div class="star four"></div>
<div class="star five"></div>
</div>
</body>
</html>
属性分开写，为什么会失效啊
相关截图：
搜索
复制
1回答
-
同学你好，代码实现效果没问题，关于属性分开写会失效的问题，是因为transform属性如果重复设置的话，后面设置的会覆盖前面设置的（后面的优先级高），所以前面设置的scale会失效。因此，transform属性的值需要一起设置。
祝学习愉快！
0
相似问题