微信小程序界面设计入门课程-样式wxss中使用css课程-文本-text-shadow文本阴影

r囧r小猫 2024-02-19 15:54 14阅读 0赞

### text-shadow文本阴影 ###

微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/huangjuhua][https_edu.csdn.net_topic_huangjuhua]

基础用法  
在 CSS3 中，text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。

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

### 小程序应用 ###

> Wxml代码

<view class='cls1'>
      文字阴影模糊效果
    </view>
    
    <view class='cls2'>
      白色的文本文字阴影
    </view>
    
    <view class='cls3'>
      霓虹灯的光芒文字阴影
    </view>

> Wxss代码

/*文字阴影模糊效果*/
    .cls1{
      text-shadow: 2px 2px 8px #FF0000;
    }
    /*白色的文本文字阴影*/
    .cls2{
    	color:white;
    	text-shadow:2px 2px 4px #000000;
    }
    /*霓虹灯的光芒文字阴影*/
    .cls3{
    	text-shadow:0 0 3px #FF0000;
    }

效果如下图  
![微信小程序界面设计入门课程-样式wxss中使用css课程-文本-text-shadow文本阴影][-_wxss_css_-_-text-shadow]

[欢迎大家收看我的视频教程：微信小程序样式入门到精通(wxss,css)（微信小程序界面设计必备技能）][wxss_css]  
![微信小程序界面设计入门课程-样式wxss中使用css课程-文本-text-shadow文本阴影][-_wxss_css_-_-text-shadow 1]

[https_edu.csdn.net_topic_huangjuhua]: https://edu.csdn.net/topic/huangjuhua
[-_wxss_css_-_-text-shadow]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/f10a17bdb1a647799cccdde51593ad67.png
[wxss_css]: https://ke.qq.com/course/368613?tuin=2b10d56
[-_wxss_css_-_-text-shadow 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/8cb4dfe63a6943c4ba532248175aa9d8.png