请选择 进入手机版 | 继续访问电脑版
Mozilla

火狐社区

登录    注册

QQ互联

css3 transform:scale(X) 会导致子元素莫名出现横线竖线

马雄 社区新人 发表于 2019-5-16 16:54:49 | 显示全部楼层 [复制链接]
1 353
本帖最后由 马雄 于 2019-6-3 13:52 编辑

``` js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
</head>
<style>
body{
    background:blue;
}
.b{
    transform: scale(.8)
}
.a{
    width:0;
    height:0;
    border-top: 101px solid transparent;
    border-left: 101px solid transparent;
    border-right: 101px solid #5ADCDA;
    border-bottom: 101px solid transparent;
     transform:rotate(90deg)
}
.a1{
    width:0;
    height:0;
    border: 100px solid red;
    border-top: 101px solid #DC735A;
    border-left: 101px solid #70DC5A;
    border-right: 101px solid #5ADCDA;
    border-bottom: 101px solid yellow;
}
</style>
<body>
<div class="b">
<p>三角形</p>
<div class="a"></div>
<p>不旋转</p>
<div class="a1"></div>
<div>
</body>
</html>

```



我在父元素使用了 `transform:scale()` 子元素莫名出现了线条

TIM截图20190603134912.png
没人遇到过吗



演示地址 https://codepen.io/maxiong88/pen/qGrJJr演示代
马雄 社区新人
发表于 2019-6-3 13:51:37 | 显示全部楼层


这个问题,大家都没遇到过吗
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表