text-shadow

# text-shadow

text-shadow 为文字添加阴影。可以为文字与 decoration 添加多个阴影，阴影值之间用逗号隔开。每个阴影值由元素在 X 和 Y 方向的偏移量、模糊半径和颜色值组成。

# uni-app x 兼容性

Web	Android	iOS	HarmonyOS
4.0	4.61	4.61	x

# 语法

text-shadow: none | [ <color>? && <length>{2,3} ]#;

# text-shadow 的属性值

名称

兼容性

描述

none

No shadow.

# 默认值

none

阴影颜色默认值为文本颜色，模糊半径默认值为0。

# 适用组件

text
button

# 示例

hello uni-app x

Template

Script

<template>
  <view class="container">
    <text class="text" style="text-shadow: 1px 1px 2px pink;">text-shadow: 1px 1px 2px pink</text>
    <text class="text" style="text-shadow: #fc0 1px 0 10px;">text-shadow: #fc0 1px 0 10px</text>
    <text class="text" style="text-shadow: 5px 5px #558abb;">text-shadow: 5px 5px #558abb</text>
    <text class="text" style="text-shadow: red 2px 5px;">text-shadow: red 2px 5px</text>
    <text class="text" style="text-shadow: 5px 10px;">text-shadow: 5px 10px</text>
  </view>
</template>



<style>
  .container {
    height: 250px;
    background-color: gray;
    justify-content: center;
  }

  .text {
    width: 100%;
    height: 40px;
    font-size: 20px;
    text-align: center;
  }
</style>