盒子阴影和div之间的小空间，当alpha设置 [英] Small space between box shadow and div when alpha set

问题描述

这里提到： http://jsfiddle.net/17zyydx1/

在div的左右两侧，在div和box shadow之间有一个空格。

There's a gap on the left and right sides of the div, between the div and the box shadow.

这在Firefox上最为明显，

It's most obvious on Firefox, but it's still noticeable on Chrome/Safari.

罪犯：

.title {
  position: absolute;
  border: 0 none;
  border-radius: 10px;
  width: 375px;
  height: 150px;
  background-color: rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 50px 50px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 50px 50px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 0 50px 50px rgba(0, 0, 0, 0.5);
}

我已经尝试将border设置为0， Margin 0什么都不做，padding 0什么都不做（值得一拍），改为1：1的比率只会使情况变得更糟。

I've tried setting border to 0 none, as you can see. Margin 0 does nothing, padding 0 does nothing (worth a shot), changing to a 1:1 ratio only makes it worse.

删除alpha会消失，

Removing the alpha makes it go away, but that's throwing the baby away with the bathwater.

任何人都知道这笔交易是什么？

Anyone know what the deal is?

推荐答案

它似乎是一个渲染问题，对div的物理边缘有反锯齿效应。如果将div更改为偶数像素宽，它会在垂直边上消失，但是由于border-radius，你仍然可以在边角看到这个。阴影必须在不同的时间（最可能在之后）呈现，然后添加到页面中。有了IE，它似乎更糟，因为它'走'的页面调整大小。我不认为这可以是固定的，但你可以最小化的div是一个偶数像素宽的问题。

It appears to be a rendering issue with an anti-aliasing effect on the physical edge of the div. If you change the div to an even number of pixels wide, it goes away on the vertical sides, but you can still see this on the corners because of the border-radius. The drop-shadow must be rendered at a different time (most likely after) then added into the page. With IE it seems to be worse as it 'walks' as the page is resized. I don't think this can be fixed, but you can minimise the issue with a div that is an even number of pixels wide.

这篇关于盒子阴影和div之间的小空间，当alpha设置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！