網頁使用
<!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; /* 使用標準字體 */
}