码迷,mamicode.com
首页 > Web开发 > 详细

【css】文本效果

时间:2019-09-21 22:59:57      阅读:121      评论:0      收藏:0      [点我收藏+]

标签:black   霓虹灯   允许   文本   样式   常见   img   css   ado   

一、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}

技术图片

 

【css】文本效果

标签:black   霓虹灯   允许   文本   样式   常见   img   css   ado   

原文地址:https://www.cnblogs.com/yuanyongbin/p/11565206.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!