CSS的定位属性实现text-shadow属性的文本下产生阴影效果

　　只要先理解text-shadow的原理，就能用定位元素进行效果的模仿。

　　text-shadow: h-shadiv v-shadov blur color

　　h-shadv为文本水平移动的距离，正值相对于当前位置向右，负值相对于当前位置向左；

　　v-shadov为文本垂直移动的距离，正值相对于当前位置向下，负值相对于当前位置向上；

　　blur为可选值。即模糊的距离。如果放在三维坐标系中，就是z值，离观察者的远近，浏览器中视觉上的效果就是清晰程度、颜色的浅淡程度；

　　color文本颜色设置；

　　经过以上分析，你知道，h-shadv、v-shadv、blur其实和一个相对定位元素的属性很像，其实说白了就是一样的。这样去理解以下代码实现就不再会有问题。可以理解为第一个shadowed是母文本，第二个shadowed是阴影文本，第二个shadowed相对于第一个shadowed进行绝对定位，设置其top、left、z-index就可以模拟出阴影。

<!doctype html>
<html>
    <head></head>
    <body>
        <!-- text-shadow属性自动产生阴影效果 -->
        <span style="text-shadow:5px 3px 1px; #888">shadowed</span>
        
        <!-- 这里我们利用定位可以产生相同的效果 -->
        <span style="position: relative;">
            shadowed  <!-- 投射阴影的文本 -->
            <span style="position:absolute;top:3px;left:5px;z-index:1;color:#888">
                shadowed  <!-- 这里是阴影 --> 
            </span>
        </span>
    </body>
</html>

 

posted @ 2014-04-26 13:14  gyy_Jade  阅读(584)  评论(0)  编辑  收藏  举报