文字描边实现内黄外绿效果

萧寂173

已于 2025-02-27 14:37:03 修改

阅读量468

点赞数 3

分类专栏： css 文章标签： javascript 前端开发语言

于 2025-02-27 14:05:43 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_68658847/article/details/145902857

版权

css 专栏收录该内容

27 篇文章

订阅专栏

网页使用

<!DOCTYPE html>
<html>
<head>
<style>
.text-effect {
    color: #ffd700;      /* 黄色文字 */
    -webkit-text-stroke: 2px #008000;  /* 绿色描边（兼容Webkit内核） */
    text-stroke: 2px #008000;          /* 标准语法 */
    font-size: 40px;     /* 推荐使用较大字号 */
    font-weight: bold;   /* 粗体显示更清晰 */
    font-family: Arial, sans-serif; /* 无衬线字体效果更好 */
}

/* 布局样式（根据需求调整） */
.container {
    padding: 20px;
    background: white;
}
</style>
</head>
<body>
<div class="container">
    <div class="text-effect">收件人</div>
    <div class="text-effect">手机</div>
    <div class="text-effect">省市区</div>
    <div class="text-effect">地址</div>
</div>
</body>
</html>

微信小程序使用

上述代码运行换到微信小程序就会发现多了很多装饰线网格线等等,满足不了我们的需求,上述代码在网页上面使用无任何问题,微信小程序推荐下面的写法

<!-- WXML -->
<view class="container">
  <view class="text-effect">收货人</view>
  <view class="text-effect">手机</view>
  <view class="text-effect">省市区</view>
  <view class="text-effect">地址</view>
</view>

/* WXSS */
.container {
  padding: 20rpx;
  background: transparent; /* 确保父容器透明 */
}

.text-effect {
  color: #ffd700;         /* 黄色文字 */
  font-size: 40rpx;
  font-weight: bold;
  text-shadow: 
    -1px -1px 0 #008000,  /* 绿色外框 */
    1px -1px 0 #008000,
    -1px 1px 0 #008000,
    1px 1px 0 #008000;
  text-decoration: none;   /* 关键：移除装饰线 */
  font-family: Arial, sans-serif; /* 使用标准字体 */
}