赞助商

CSS3转换模糊边框

发布时间:2019-07-11 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了CSS3转换模糊边框脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我的页面上有一个居中的表单,使用顶部和左侧值以及css3转换.
<div class="middle">
    <h1>This is blurry,or should be.</h1>
</div>
.middle {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 390px;

    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);

    /** backface-visibility: hidden; **/
}

h1 {
    padding-bottom: 5px;
    border-bottom: 3px solid blue
}

注意背面可见性.当设置为隐藏时,使用chrome 42解决了所有问题.它不会变得模糊.对于其他人使用相同的chrome版本,它会使它变得模糊.

这是没有BV:http://jsfiddle.net/mzws2fnp/的样子

对你来说它可能是模糊的,对其他人可能不是.

这是BV:http://jsfiddle.net/mzws2fnp/2/的样子

出于某种原因,人们看到边界模糊,但我没有.我知道背面 – 可见性:隐藏是为了解决这个问题,而且它对我有用,而不是对于使用与我相同的浏览器的其他人.

解决方法

试试-50.1%
transform: translateY(-50%) translateX(-50.1%);

编辑:我发现,当chrome dev工具打开时,它们会模糊,尝试关闭它们并刷新

总结

以上是脚本之家为你收集整理的CSS3转换模糊边框全部内容,希望文章能够帮你解决CSS3转换模糊边框所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:76874919,请注明来意。
标签: