CSS Chrome 中的框阴影和边框半径错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2937731/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Box-shadow and border-radius bug in Chrome
提问by Klaster_1
I've been experimenting with CSS3 and found something strange. Heres's the part of DIV style:
我一直在试验 CSS3，发现了一些奇怪的东西。下面是 DIV 样式的部分：
border:#446429 solid 1px;
border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
box-shadow:3px 0px 15px #000000 inset,0px 3px 15px #000000 inset;
-moz-box-shadow:3px 0px 15px #000000 inset,0px 3px 15px #000000 inset;
-webkit-box-shadow:3px 0px 15px #000000 inset,0px 3px 15px #000000 inset;
Rendering in Opera and Firefox are same and perfect:
Opera 和 Firefox 中的渲染是相同且完美的：
But Chrome renders shadow outside the border:
但是 Chrome 在边框外渲染阴影：
Is it supposed to be so or I missed something important?
应该是这样还是我错过了一些重要的东西？
采纳答案by dmazzoni
It looks like a known bug:
它看起来像一个已知的错误：
http://code.google.com/p/chromium/issues/detail?id=29427
http://code.google.com/p/chromium/issues/detail?id=29427
Check out the bug discussion, you may find a workaround. Definitely Star this bug if you want it to be fixed sooner!
查看错误讨论，您可能会找到解决方法。如果您希望尽快修复此错误，请务必为该错误加星号！
回答by Beth Faulds
Putting in first an inset shadow that is the same colour as the background seems to work pretty well without putting extra markup on your page.
首先放置一个与背景颜色相同的插入阴影似乎可以很好地工作，而无需在页面上放置额外的标记。
E.g. if you had a white background page :
例如，如果您有一个白色背景页面：
-webkit-box-shadow:1px 1px 1px #fff inset,0px 0px 5px #333 inset;
回答by Tony
I just found fix, but it needs additional markup. We need place element with round corners and inner shadow into another container with the sameround corners and overflow hidden.
我刚刚找到了修复程序，但它需要额外的标记。我们需要将具有圆角和内阴影的元素放入另一个具有相同圆角和溢出隐藏的容器中。
<div class="foo"><div>Hello!</div></div>
<style type="text/css">
.foo {-webkit-border-radius: 10px; overflow: hidden;}
.foo div {-webkit-border-radius: 10px; -webkit-box-shadow: inset 1px 1px rgba(50%, 50%, 50%, .5);}
</style>
Announced above fix with border crashes border radius and is incompartible with background image under element (because of border color).
上面宣布的带有边框的修复会导致边框半径崩溃，并且与元素下的背景图像无法兼容（因为边框颜色）。
Thanks.
谢谢。
回答by monotasker
The only workaround I've seen is to put a border on the element with the shadow and make that border wider than the shadow diffusion. So for an inset shadow like this:
我见过的唯一解决方法是在带有阴影的元素上放置一个边框，并使该边框比阴影扩散更宽。所以对于这样的插入阴影：
box-shadow:inset 0 0 7px #000;
You would need to add a border like this:
您需要添加这样的边框：
border:solid 7px #fff;
It's the third number in the box-shadow declaration that you need to match (or exceed) with the border width. if you don't want a big fat old border on the element, you'll obviously need to make the border the same colour as the background behind it. So this workaround doesn't help much if your element is above a patterned image or a gradient. But on solid colours it works decently.
它是 box-shadow 声明中需要与边框宽度匹配（或超过）的第三个数字。如果你不想在元素上有一个又大又胖的旧边框，你显然需要使边框与后面的背景颜色相同。因此，如果您的元素位于图案图像或渐变之上，则此解决方法无济于事。但在纯色上它工作得很好。
回答by Hymanie
Good news! Looks like a fix is coming through. Here's the ticket in WebKit Bugzilla, marked as resolved/fixed: https://bugs.webkit.org/show_bug.cgi?id=41576
好消息！看起来修复正在进行中。这是 WebKit Bugzilla 中的票，标记为已解决/已修复：https://bugs.webkit.org/show_bug.cgi?id =41576
And here's the commit to trunk in WebKit's Trac! http://trac.webkit.org/changeset/74089
这是 WebKit 的 Trac 中对主干的提交！http://trac.webkit.org/changeset/74089
回答by Danstyled
Try this -webkit-box-shadow: inset 0px 0 7px rgba(255, 242, 94, 0.4); using rgba seems to fix it.
试试这个 -webkit-box-shadow: inset 0px 0 7px rgba(255, 242, 94, 0.4); 使用 rgba 似乎可以解决它。
Good luck!
祝你好运！
回答by Uzair
Using negative values has solved the problem for me.
使用负值为我解决了这个问题。
-webkit-border-radius:10px;
-webkit-box-shadow: -1px -1px 2px #CCC;
回答by Salman von Abbas
This bug has been fixed in the latest canary build. :)
此错误已在最新的 Canary 版本中修复。:)
回答by Bernat Romagosa
Beth Fauld's solution almost works, there is only a slight mistake, it should look as follows:
Beth Fauld 的解决方案几乎有效，只有一个小错误，应该如下所示：
-webkit-box-shadow:1px 1px 0px 1px #fff inset, 0px 0px 5px #333 inset;
Where #fff is the background color (outside the box), and #333 is the shadow color.
其中#fff 是背景颜色（框外），#333 是阴影颜色。
The third value in -webkit-box-shadowdefines the blur size, while the fourth defines the shadow (opaque) size, so it's the latter that should be set to 1px.
-webkit-box-shadow 中的第三个值定义了模糊大小，而第四个值定义了阴影（不透明）大小，因此应该将后者设置为 1px。
