logo标签列表

CSS3变形模糊边框

css
12

我在页面上有一个居中的表单，使用top和left值以及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
}

注意backface-visibility。将其设置为hidden后，Chrome 42版本即可解决所有问题，不会出现模糊情况。但是对于其他使用相同版本的用户，它可能会呈现模糊效果。

以下是没有使用BV时的样子：http://jsfiddle.net/mzws2fnp/

enter image description here

对你来说可能很模糊，但对别人来说不一定。

以下是使用BV时的样子：http://jsfiddle.net/mzws2fnp/2/

enter image description here

由于某种原因，有些人看到边框模糊，但我没有。我知道backface-visibility：hidden是用来修复这个问题的，对我来说确实有效，但对于使用相同浏览器的其他人却无效。奇怪。

你想要什么效果，期望的行为是什么？ - apaul
为了让每个人都不会模糊？ - davidxd33
可能是Chrome浏览器翻译后字体模糊的问题的重复。 - joppiesaus
在 Chrome 翻译后字体看起来模糊 的解决方案对于这个问题无效。 - Vinicius Coelho
8个回答
9
尝试 -50.1%。
 transform: translateY(-50%) translateX(-50.1%);

编辑： 我已经发现，当Chrome开发工具打开时，它们会变得模糊，请尝试关闭它们并刷新

1
@ViniciusCoelho 我发现，当打开 Chrome 开发工具时它们会变模糊，尝试关闭它们并刷新。 - youbetternot
1
奇怪的是，对我来说，无论是否打开开发工具，它都模糊不清。你提出的将其更改为“-50.1％”的解决方案对我有用。 - Sean Whelan
1
2019年了，但这个问题仍然困扰着我。关闭开发者工具似乎可以解决这个问题。幸运的是，这只是一个浏览器bug。我的意思是，当开发者工具打开时，尤其是在IE和Edge中，总会发生很多奇怪的事情。 - Abana Clara
2

这是Google Chrome的一个bug。我向Google报告了这个问题：

CSS变换中的渲染错误：它会使边框模糊

<div class="middle">
    <input type="text" />
</div>
.middle {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
}
input {
    border: 1px solid black;
    border-radius: 4px;
}
var middle = document.querySelector('.middle');
setInterval(function(){
    middle.style.paddingTop = middle.style.paddingTop === "0px" ? "1px" : "0px";
}, 1000);

动画虫演示

（该链接为虫子动画演示的网页链接）
1
一年过去了，这个问题似乎仍然存在。我知道这不是Chrome出了问题，而是其他浏览器只是在更努力地补偿半个单位，但仍然令人沮丧的是没有简单的解决方法存在。 - Lawyerson
1

边框请使用偶数（2px或4px），奇数（3px或5px）会产生模糊效果。

border-bottom: 4px solid blue;
1
当你使用百分比时，会产生奇数像素。边框会变得模糊， 使用parseInt赋值可以得到整数值。 

$(document).ready(function(){


   $('.middle').css({ 
            'top':parseInt($('.middle').position().top)+ 'px', 
            'left': parseInt($('.middle').position().left)+'px',
            'transform':'none',
            '-webkit-transform':'none' 
            });

});
.middle {
position: absolute;
top: 30%;
left: 50%;
min-width: 390px;

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

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

.middle2 {
position: absolute;
top: 70%;
left: 50%;
min-width: 390px;

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

h1 {
padding-bottom: 5px;
border-bottom: 4px solid blue}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="middle">
<h1>This is blurry, or should be.</h1>
</div>


<div class="middle2">
<h1>This is blurry, or should be.</h1>
</div>

1
请在您的回答中添加一些文本描述以改善它。 - YesThatIsMyName
1
在使用实线边框的特定情况下，您可以尝试使用盒子阴影代替边框来解决问题。例如，将：border-bottom: 3px solid blue; 替换为 box-shadow: 0px 3px 0px blue;。
0

由于翻译元素的高度是奇数。当元素高度为偶数时，这种情况不会发生。

0

有一个小技巧可以帮助将任何块设置为中心位置。 在父级<div>中添加position: relative属性，并添加以下属性：

display: flex;
justify-content: center;

现在，我们需要为想要居中的块添加 align-self: center; 属性，确保该块是 绝对定位。
-2

当我们添加时，出现了这个问题

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

或者

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

在Chromium漏洞列表中，这仍然是一个未解决的问题。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接