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

时间：2021-07-02 16:44:17

　　只要先理解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>

相关文章