小程序CSS入门

小程序样式课程-第11课-文本-text-shadow文本阴影

时间:2019/1/2 15:07:14  作者:互联网  来源:网络转载  查看:26252  评论:0
内容摘要:text-shadow文本阴影基础用法在 CSS3 中,text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表,每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。值描述h-shadow必需。水平阴影的位置。允许负值v-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;

}

效果如下图

  小程序样式课程-第11课-文本-text-shadow文本阴影

欢迎大家支持我的视频课程:微信小程序样式开发入门 
小程序样式课程-第1课-样式基础-元素选择器


相关评论
评论者:      验证码:  点击获取验证码
咨询QQ/微信:45157718 点击这里给我发消息 | 电话:13516821613 | 浙江杭州余杭区东港路118号雷恩科技创新园 | 网站支持:杭州摇亿网络科技 | 浙ICP备06056032号-6 |