首页 > Web开发 > 详细

css3 scale 缩放出现 1px 问题

时间:2020-03-14 19:55:08      阅读:202      评论:0      收藏:0      [点我收藏+]

问题描述

先来一段html代码

<div class="container">
    <div class="parent">
        <div class="son">
        </div>
    </div>
</div>
.parent {
    border: 16px solid #392A72;
    position: relative;
    background-color: #FFF;
    width: 298px;
    height: 206px;
}
.son {
    width: 100%;
    height: 32px;
    background-color: #392A72;
}

此刻效果是正常的一倍效果

技术分享图片

接着加入container缩放

.container {
    transform: scale(0.7);
    transform-origin: 0 0;
}

则会出现极细致的一条白色边,原因大概就是.parent元素的border和.son的height经过缩放后不会是整数,两个数值的小数点被省去不渲染,导致两者叠加起来和真正要的效果差1px,而让.parent的背景颜色出现。

技术分享图片

解决办法

无,尽力避免父子元素都有背景和边框色时的缩放布局吧。

若有大佬知道请在下面留言告知我吧

css3 scale 缩放出现 1px 问题

原文:https://www.cnblogs.com/everlose/p/12493606.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!