本帖最後由 rainbow 於 2016-3-30 22:17 編輯
备用交流用帖,勿删!
熱烈祝賀□□新網站開通
|
|
|
|
|
|
|
CSS3 里的属性 text-shadow ,在以Chrome为内核的浏览器里可以使用,在IE浏览器里不能使用(据说在IE10里可以使用了)。也没有可以完全兼容的方法。但是MicroSoft的滤镜系列里有一个filter:shadow 的效果有点类似。因此在代码里既写上 text-shadow , 又写上 filter:shadow ,可以起到“兼容”的效果。
您给我的代码就是利用这个原理,它还多用了一个 fliter:blur 模糊滤镜,试图效果更接近。但是我觉得可以省的。
上面的效果我是简化了代码,不仔细看在IE浏览器里和在Chrome里效果已经比较类似了
您原来的代码里主要是颜色代码没有设置一致,致使在两个浏览器里颜色不一样了。
现在文字的代码:
<div style="position:relative;font:bold 40pt/150% 'Trebuchet MS';height:80px;color:#ff6666;text-shadow:#800000 3px 3px 3px;">
<span style="z-index:1;position:absolute;filter:shadow(color=#800000, direction=135, strength=4);left:27px;">熱烈祝賀□□新網站開通</span>
</div>
在第一行里(Chrome用的代码):
color:#ff6666;text-shadow:#800000 3px 3px 3px;
是文字颜色:#ff6666 两个浏览器里是一致的。后面的 #800000是阴影的颜色,3px是阴影的偏移量和模糊程度。
在第二行里(IE用的代码):
filter:shadow(color=#800000, direction=135, strength=4);
这里没有设置文字的颜色,因为在第一行里dia标签里已经设置了,有继承性的,因此不设置了。免得搞错。
color=#800000 是阴影颜色,direction=135 是阴影的方向:右下,与阴影强度 strength=4 相配合,起到上面text-shadow里的 3px 3px 3px的类似作用。
|