我一直在尝试使用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;
在Opera和Firefox中，渲染效果相同且完美:
但是Chrome将阴影渲染在边框外:
这样正常吗？还是我漏掉了重要的东西？
看起来是一个已知的bug：
http://code.google.com/p/chromium/issues/detail?id=29427
查看bug讨论，你可能会找到一个解决方法。如果你想更快地修复它，一定要收藏这个bug！
在首先添加与背景颜色相同的内嵌阴影似乎可以很好地工作，而不需要在页面上添加额外的标记。
例如，如果您有一个白色背景的页面：
-webkit-box-shadow:1px 1px 1px #fff inset,0px 0px 5px #333 inset;
我刚找到解决方法，但需要添加额外的标记。我们需要将带有圆角和内阴影的元素放置到另一个容器中，该容器具有 相同的 圆角和溢出隐藏。
<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>
以上公布的修复方案会导致边框崩溃，边框半径与元素下面的背景图不兼容（因为边框颜色的原因）。
谢谢。
box-shadow:inset 0 0 7px #000;
border:solid 7px #fff;
在box-shadow声明中，您需要匹配（或超过）第三个数字与边框宽度相同。如果您不想在元素上有一个又粗又老的边框，您显然需要将边框颜色与其背后的背景颜色相同。因此，如果您的元素位于图案图像或渐变之上，则这种解决方法并没有太大帮助。但是，在纯色背景上，它的效果还是不错的。
好消息！看起来修复程序即将到来。这是在WebKit Bugzilla中标记为已解决/已修复的票据：https://bugs.webkit.org/show_bug.cgi?id=41576
这是在WebKit Trac中提交到主干的代码！http://trac.webkit.org/changeset/74089
十二年后的2023年，我仍然看到一些网站出现了那个bug。
我注意到通过将模糊半径设置为较高的值并同时将扩散半径设置为负值，可以消除这个讨厌的方形阴影。
-webkit-box-shadow: 0 0 11px -5px #555;
box-shadow: 0 0 28px -16px #1c3d5c;
-webkit-box-shadow:1px 1px 0px 1px #fff inset, 0px 0px 5px #333 inset;
#fff 是背景颜色（盒子外部），而 #333 是阴影颜色。
-webkit-box-shadow 中的第三个值定义了模糊大小，而第四个值定义了阴影（不透明）大小，因此应将后者设置为 1px。
使用负值已经解决了我的问题。
-webkit-border-radius:10px;
-webkit-box-shadow: -1px -1px 2px #CCC;
这个 bug 已经在最新的金丝雀版本中修复了。:)
试试这个 -webkit-box-shadow: inset 0px 0 7px rgba(255, 242, 94, 0.4); 使用rgba似乎可以解决问题。
祝好运！