css文本效果

Posted 2022-11-19 yuanyongbin

一、text-shadow（文字阴影）

　　1、基础用法：text-shadow: 1px 1px 5px rgb(106, 103, 103);

　　2、基础参数：

• h-shadow：必需。水平阴影的位置。允许负值。
• v-shadow：必需。垂直阴影的位置。允许负值。
• blur：可选。模糊的距离。
• color：可选。阴影的颜色。

　　3、常见文本效果

• 　　基础样式

.c
    text-shadow: 1px 1px 5px rgb(106, 103, 103);

 

•  文字描边

　　有4个阴影时, 可以给文字画一个轮廓:

.b 

    color: #BBE;
        text-shadow: -1px 0 black, 
                     0 1px black, 
                     1px 0 black, 
                    0 -1px black;

 

•  霓虹灯效果

　　水平值和垂直值为0，适当的添加模糊距离，可以实现霓虹灯效果。

.d text-shadow: 0 0 0.2em #8F7
.e text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87
.f text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F,
    0 0 0.2em #87F