Question

我一直在试验CSS3并发现了一些奇怪的东西。 Heres是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;

Opera和Firefox中的渲染是完全相同的：

alt text http://i47.tinypic.com/j8egp5.png

但Chrome会在边框外呈现阴影：

alt text http://i45.tinypic.com/5doykw.png

它应该是这样还是我错过了一些重要的东西？

Answer 1

它看起来像一个已知的错误：

http://code.google.com/p/chromium/issues/detail?id=29427

查看错误讨论，您可能会找到解决方法。如果你希望它能早点修复，那肯定会给这个bug加星标！

Answer 2

首先放入一个与背景颜色相同的插入阴影似乎工作得很好，而不会在页面上添加额外的标记。

E.g。如果你有一个白色背景页面：

-webkit-box-shadow:1px 1px 1px #fff inset,0px 0px 5px #333 inset;

Answer 3

我见过的唯一解决方法是在带阴影的元素上加上边框，使边框比阴影扩散更宽。所以对于像这样的插入阴影：

box-shadow:inset 0 0 7px #000;

您需要添加如下边框：

border:solid 7px #fff;

这是盒子阴影声明中的第三个数字，你需要匹配（或超过）边框宽度。如果你不想在元素上有一个很大的旧边框，你显然需要使边框与它背后的背景颜色相同。因此，如果您的元素位于图案图像或渐变之上，则此解决方法无济于事。但是对于纯色，它可以很好地工作。

Answer 4

我刚发现修复，但它需要额外的标记。我们需要将带有圆角和内阴影的元素放入另一个容器中，相同的圆角并隐藏溢出。

<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>

宣布上面修复边框崩溃边框半径，与元素下的背景图片无法比较（因为边框颜色）。

感谢。

Answer 5

好消息！看起来修复工作正在进行中。这是WebKit Bugzilla中的票证，标记为已解决/已修复：https://bugs.webkit.org/show_bug.cgi?id=41576

这是WebKit Trac中对trunk的提交！ http://trac.webkit.org/changeset/74089

Answer 6

试试这个-webkit-box-shadow：inset 0px 0 7px rgba（255,242,94,0.4）;使用rgba似乎解决了这个问题。

祝你好运！

Answer 7

使用负值已经解决了我的问题。

-webkit-border-radius:10px;
-webkit-box-shadow: -1px -1px 2px #CCC;

Answer 8

此错误已在最新的金丝雀版本中修复。：）

Answer 9

Beth Fauld的解决方案几乎可行，只有轻微的错误，它应该如下所示：

-webkit-box-shadow:1px 1px 0px 1px #fff inset, 0px 0px 5px #333 inset;

其中#fff是背景颜色（框外），＃333是阴影颜色。

-webkit-box-shadow 中的第三个值定义了模糊大小，而第四个定义了阴影（不透明）大小，因此后者应该设置为1px。

Chrome中的box-shadow和border-radius错误

9 个答案: