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编辑  收藏  举报