微信小程序样式入门到精通(wxss)课程011-文本-text-shadow文本阴影

text-shadow文本阴影

基础用法

在 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;

}复制代码

效果如下图

微信小程序交流群：111733917 

欢迎大家收看我的：微信小程序样式入门到精通(wxss,css)视频课程 https://ke.qq.com/course/368613?tuin=2b10d56 

转载于:https://juejin.im/post/5ca2c731e51d457e222644e9