在一些页面中我们常看见如下所示的高亮效果，一般用来区别于其他文字从而突出重点内容，有时也可用作大标题等。

这里我们可以使用CSS的 box-shadow 属性中的 inset（内侧阴影）

这是标题 这是正常的文字， 这是高亮的文字。 

1
2
3
4
5
6
7
8
9
<div class="text-content">
        <span class="text-title">
            这是标题
        </span>
        这是正常的文字，
        <span class="hightline" >
            这是高亮的文字。
        </span>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<style type="text/css">
    .text-content {
        font-size:16px; 
        line-height:24px; 
        color:#000000;
        text-align:left; 
        word-break:break-all;
        width: 200px;
        height: 100px;
        background: hsl(59, 100%, 85%);
        border-radius: 10px;
        padding: 8px;
        box-sizing: border-box;
    }
    .text-title {
        box-shadow: 0 -14px 0 #f58b83 inset; 
        display: block; 
        width: 100px; 
        text-align: center; 
        font-size: 20px; 
        font-weight: bold;
        color: rgb(65, 65, 65);
        margin: 6px auto;
    }
    .hightline {
        box-shadow: 0 -10px 0 #61fa7a inset;
    }
</style>

条条大路通罗马。

我们还可以通过额外设置一个彩色div块，并用相对定位浮动到文字下方，来实现相同效果。