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>