<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>
    <text class="text" style="text-shadow: 1px 2px 4px rgb(34, 202, 43);">text-shadow: 1px 2px 4px rgb(34, 202, 43)</text>
    <text class="text" style="text-shadow: 2px 4px rgba(202, 207, 17, 0.5);">text-shadow: 2px 4px rgba(202, 207, 17, 0.5)</text>
  </view>
</template>

<script setup>

</script>

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

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