微信小程序css之阴影效果

一、盒子阴影

box-shadow: h-shadow v-shadow blur spread color inset;

• h-shadow 必需的。水平阴影的位置。允许负值
• v-shadow 必需的。垂直阴影的位置。允许负值
• blur 可选。模糊距离
• spread 可选。阴影的大小
• color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
• inset 可选。从外层的阴影（开始时）改变阴影内侧阴影
  wxml:

<!--index.wxml-->
<view class="container">
  <view class="shadow">盒子阴影</view>
</view>

wxss:

.shadow{
  width:200rpx;
  height:200rpx;
  background-color: #000000;
  box-shadow: 40px 80px 20px 30px #00FF00;
}

效果图：

二、文字阴影

text-shadow:hpx vhpx rpx color

• hpx 水平偏移
• vpx 垂直偏移
• rpx 模糊度
• color 阴影颜色
• 多个阴影用逗号隔开
  wxml:

<!--index.wxml-->
<view class="container">
  <view class="shadow">文字阴影</view>
</view>

wxss:

.shadow{
  font-size:100rpx;
  text-shadow: 10px 10px 10px #ff0000;
}

效果图：