位置:电子教程 > 微信小程序设计教程 (如果看不到内容请使用360浏览器) 推荐学习资源
小程序样式基础
框模型
定位
选择器
当前阅读教程:微信小程序设计教程 > 文本阴影(text-shadow)
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 文本溢出(text-overflow) 下一篇: 字符转换(text-transform)

1.基础语法

CSS3 中,text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表,每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。参数如下:

描述

h-shadow

必需。水平阴影的位置。允许负值

v-shadow

必需。垂直阴影的位置。允许负值

blur

可选。模糊的距离

color

可选。阴影的颜色

2.小程序应用

根据基础的语法,下面在微信小程序中实现文本的不同阴影效果。

.wxml文件代码示例

小白教程网www.2d5.net

如下:

<view>
  文字阴影模糊效果
</view>
 
<view>
  白色的文本文字阴影
</view>
 
<view>
  霓虹灯的光芒文字阴影
</view>

.wxss文件代码示例

小白教程网www.2d5.net

如下:

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

效果如图3-11所示

image.png


上一篇: 文本溢出(text-overflow) 下一篇: 字符转换(text-transform)
毕业设计网             广告联系QQ:45157718(微信同号)