9.28【前端开发】文本属性：如何使用文本阴影等样式？

文本属性：如何使用文本阴影等样式？

文本对齐与缩进

代码语言：javascript复制

p {
font-size: 12px;
text-align: left;
line-height: 28px;
text-indent: 2em;
}

为什么用2em，如果相当于两个字宽。

text-decoration属性

代码语言：javascript复制

<style>
    .div1 a:nth-of-type(1){  text-decoration: underline;  }
    .div1 a:nth-of-type(2){  text-decoration: overline;  }
    .div1 a:nth-of-type(3){  text-decoration: line-through;  }
    .div1 a:nth-of-type(4){  text-decoration: none;  }
</style>
<div class="div1">
    <a href="#">下划线：underline</a> <br/> <br/>
<a href="#">上划线：overline</a> <br/> <br/>
<a href="#">删除线：line-through</a> <br/>  <br/>
<a href="#">无下划线：none</a> <br/> <br/>
</div>

文本阴影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>
 

阴影效果在浏览器里是全支持的，可以放心使用。first-line这个伪元素，指的是一行所在的文本，并非一个p或h*标签里面的全部文本。

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

原效果：

及代码：

代码语言：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>

使用text-shadow改写，实现同样的效果

代码语言：javascript复制

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

最佳实践

代码语言：javascript复制

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

只需要记住这两种语法就可以了。

line shadow text 语法 最佳实践

0 人点赞