我在谷歌浏览器中的文本阴影发生了什么？答案

【问题标题】：What happened with my text shadows in Google Chrome?我在谷歌浏览器中的文本阴影发生了什么？
【发布时间】：2011-10-08 16:25:38
【问题描述】：

所以我有一些简单的样式herepreviosly Chrome 以与 FF 相同的方式呈现它 - 就像这样

突然间，我在 chrome 中查看我的文档并看到了这个

阴影完全不透明=( 怎么处理 tham - 如何修复？

我的CSS code：

body{padding: 5px;background-color: #FFF;font: 100.01% "Trebuchet MS",Verdana,Arial,sans-serif}
h1,h2,p{margin: 0 10px}
h1,h2{font-size: 250%;color: #FFF; text-shadow: 0px 1px 1px #000;}
h2{font-size: 120%;}
div#nifty{ margin: 0 1%;background: #9BD1FA}
b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
p{color: #000;text-shadow: 0px 1px 1px #fff;padding-bottom:0.3em}
input[type="button"], .eButton {width: 150px;padding: 5px 10px;word-wrap: break-word;height: auto;}}
::-moz-selection {   background-color: #fbfdfe;  color: #ff6c24; text-shadow: 0px 1px 1px #258ffd;}
::selection {  background-color: #fbfdfe;   color: #fff;   text-shadow: 0px 1px 1px #258ffd;}

【问题讨论】：

在 OS X 10.7 上的 Chrome 14.0.835.202 和 16.0.903 中看起来不错。
Windows Chrome 14.0.835.202 m 给我带来了问题，16.0.903.0 canary 以一种非常奇怪的方式工作 - 首先它以一种糟糕的方式呈现它，但在几秒钟内它又将它重新呈现为像方式。
XP 上的 Chrome 15.0.874.83 beta-m 对我来说也有同样的问题。此外，您将输入拼写为“输入”。
Windows XP Chrome 14.x 和 Chrome 2.x 渲染不好。它必须是同一种渲染错误，因为将 font-size 更改为 260% 可以解决问题。
这是一个已知问题：crbug.com/23440

标签： html css google-chrome rendering

【解决方案1】：

如果您正在寻找半透明阴影，您可以尝试使用 rgba 值而不是 hex 值。所以应该是：

h1 { text-shadow: 1px 1px 1px rgba(0,0,0,.20); }

其中前三个数字是 RBG 值（红、绿、蓝），第四个数字是不透明度（从 0 到 1）。所以上面的例子是黑色的，不透明度为 20%。

此外，奇怪的阴影权重似乎来自 text-shadow 上的模糊值。当我将其更改为1px 1px 0 时，它会提供比0px 1px 1px 更均匀的阴影。不知道为什么。

【讨论】：