我的文字阴影在Google Chrome中发生了什么变化?

Rel*_*lla 6 html css rendering google-chrome

所以我有一些简单的风格,这里普遍认为Chrome渲染方式与FF一样 - 就像这样

软FF 4渲染

突然之间,我用chrome查看我的文档并看到了这一点

在此输入图像描述

在所有阴影都不透明=(如何处理tham - 如何修复?

在此输入图像描述

我的CSS代码:

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;}
Run Code Online (Sandbox Code Playgroud)

小智 1

如果您正在寻找半透明阴影,您可以尝试使用 rgba 值而不是十六进制值。所以它会是:

h1 { text-shadow: 1px 1px 1px rgba(0,0,0,.20); }
Run Code Online (Sandbox Code Playgroud)

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

另外,奇怪的阴影重量似乎来自text-shadow. 当我将其更改为时,1px 1px 0它会产生比 更均匀的阴影0px 1px 1px。不知道为什么。