【前端开发】文本阴影：如何使用text-shadow实现首字线索引效果？

文本阴影 text-shadow

语法

代码语言：javascript复制

/* color | offset-x | offset-y | blur-radius */
text-shadow: #fc0 1px 0 10px;
/* color | offset-x | offset-y */
text-shadow: white 2px 5px;

有好几种语法，但上面这两种最好记一点。

代码语言：javascript复制

<h1>文本阴影效果</h1>
<style type="text/css">
    h2.h21 {
        text-shadow: darkblue 2px 2px 2px ;
    }
    h2.h22::first-letter {
        text-shadow: darkblue 2px 2px 2px, yellow 4px 4px 3px;
    }
    h2.h23::first-line {
        text-shadow:red 2px 2px 2px, yellow 4px 4px 3px;
    }
</style>
<h2 class="h21">文本</h2>
<h2 class="h23">念和业务经营模式得到了社会的广泛<br>念和业务经营模式得到了社会的广泛</h2> 

效果：

阴影效果在浏览器里是全支持的，可以放心使用。

练习：使用阴影实现首字母索引效果

原效果：

代码是这样的：

代码语言：javascript复制

<p><span>A</span>&nbsp;&nbsp;A Fine Frenzy&nbsp;&nbsp;Air Supply&nbsp;&nbsp;Akon&nbsp;&nbsp;Alan Silvestri&nbsp;&nbsp; Apink&nbsp;&nbsp;安又琪&nbsp;&nbsp;安在旭&nbsp;&nbsp;安室奈美惠&nbsp;&nbsp; </p>

这个代码多用了一个span标签，破坏了数据的完整性，需要额外处理。 使用text-shadow改写，实现同样的效果：

代码语言：javascript复制

h2::first-letter {
text-shadow: red -30px 0 0;
margin-left: 50px;
}

shadow text 浏览器 索引 语法

0 人点赞