带有阴影的圆角在 chrome 中不起作用答案

【问题标题】：rounded corner with drop shadow not working in chrome带有阴影的圆角在 chrome 中不起作用
【发布时间】：2011-10-21 11:54:13
【问题描述】：

我创建了一个带有圆角和阴影效果的 div。这个 div 在 firefox 和 safari 中渲染得很流畅。但是 chrome 无法正确渲染。因为市场上 chrome 的使用量正在增长，所以我希望在该浏览器中进行这项工作。请看下面的代码：

<html>
<style>
.cropdiv{
     margin-left:50px;

    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-radius-bottomleft: 10px;
    -webkit-border-bottom-left-radius: 10px;

    box-shadow:5px 5px 5px #999;
    -webkit-box-shadow:5px 5px 5px #999;
    -moz-box-shadow:1px 3px 4px 2px #999;

    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#444444),color-stop(0.1, #444444));
    background: -moz-linear-gradient(top, white, #444444 15%);

    font-size: small;
    font-family: 'Lucida Console', Monaco, monospace;
    color: #FFFFFF;
    text-align: left;
    font-weight: bold;
    border:2px solid #FFF;
    border-top:0px solid #FFF;
}

</style>

<div id="container" class="cropdiv" style="height:100px;width:370px;">
    <div style="padding-top:10px;">textCapture</div>
    <hr style="padding:0%;width:100%;"></hr>

</div>
</html>

我用的是chrome 10.0.646.0版本，fedora14平台。看看@下面的屏幕：

非常感谢任何帮助，谢谢！

【问题讨论】：

“渲染不正确”是什么意思？哪一部分？
@Sparky672 谢谢。 chrome 中的问题是 div 周围的边框未正确呈现。 div内的左边框对齐位。
能发个链接或者截图吗？
@Sparky672 但我仍在测试，未托管在站点中。
您无需托管即可截取屏幕截图，因此我们可以看到您在说什么。

标签： google-chrome css

【解决方案1】：

嗯，这段代码非常适合我的 chrome。问题是，chrome 浏览器没有文本渲染器。所以感觉好像背景被像素化了。

【讨论】：

我在 fedora14 中使用 chrome 10.0.646.0 构建。这是问题吗？
可能。您的 Chrome 版本很古老。听说过升级吗？
@LeaVerou 现在我安装了 chrome build 14.0.835.202。即使现在问题仍然存在。 chrome version14 不是很古老吧？

【解决方案2】：

您不再需要“-webkit”（对于最新版本）。较新的 Webkit（Chrome 和 Safari）浏览器符合 CSS3。如果支持较旧的浏览器版本很重要，请包括“-webkit”，但也一定要添加符合 CSS3 的代码...

#example1 {
   border-radius: 15px;
 }

【讨论】：

@Sekar，Chrome 与 Safari 如此不同，这很奇怪。
您仍应为旧版本提供供应商前缀解决方案
@albert，是的，也许。但是 OP 缺少他绝对需要包含的最新 CSS3 版本。
真的吗？ -1 表示“-webkit”已被 CSS3 兼容代码替换？