[微信原生小程序]css给文字添加描边、阴影携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情

事情是这样的，产品需要在微信小程序里实现这样的文字效果👇，我一想着还不简单，这是个很常见的效果，肯定给它完美实现喽

截屏2022-08-12 13.09.00.png 开始愉快的写样式

<view class='num'>剩余挑战次数：3</view>

.num {
  font-size: 50rpx;
  color: #7672FB;
  font-weight: 900;
  letter-spacing: 4rpx;
}

截屏2022-08-12 13.24.06.png

1、尝试使用text-stroke

text-stroke：text-stroke-width text-stroke-color

-webkit-text-stroke: 4rpx #fff;

截屏2022-08-12 10.51.46.png 嚯直接把文字都要淹没了，赶紧再调整下看看，感觉有戏

-webkit-text-stroke: 2rpx #fff;

我以为写完这行css就能愉快的开始摸鱼了，效果出来了才发现事情有点不简单

截屏2022-08-12 10.56.48.png 好像还是有点不一样描边的宽度好像直接会占据字体内容

2、尝试使用text-shadow

text-shadow: h-shadow v-shadow blur color;

给文本添加text-shadow

text-shadow: -4rpx -4rpx 10rpx #fff;

截屏2022-08-12 10.38.15.png

效果好像还不错，但不是我想要的，我们改变下模糊的位置再来看下

text-shadow: -2rpx -2rpx 4rpx #fff;

截屏2022-08-12 10.30.52.png

这个效果还挺好看，但也还是不一样

3、使用定位来进行“描边”

通过放置两个文本，通过给底部文本添加描边来解决

  <view class='numWrap'>
    <view class='num'>剩余挑战次数：3</view>
    <view class='num numBorder'>剩余挑战次数：3</view>
  </view>

.numWrap {
  width: 100%;
  position: relative;
}

.num {
  width: 100%;
  position: absolute;
  z-index: 2;
  text-align: center;
  font-size: 50rpx;
  color: #7672FB;
  font-weight: 900;
  letter-spacing: 4rpx;

}

.numBorder {
  position: absolute;
  z-index: 1;
  -webkit-text-stroke: 10rpx #fff;
}

截屏2022-08-12 13.09.00.png 终于完美实现了耶，css代码很简单，这也算是奇技淫巧了哈哈哈，看来要学习的东西还有很多，css果然是魔法，由于之前都是开发一些业务逻辑比较复杂的项目，看来css还有很多可以学习的，说来说去还是世面见的少啊