box-shadow.uvue

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1">
    <!-- #endif -->
    <view style="flex-grow: 1">
      <view>
        <text>box-shadow: 5px 5px black</text>
        <view class="backgroundview">
          <view class="common" style="box-shadow: 5px 5px black"></view>
        </view>
      </view>

      <view>
        <text>box-shadow: 5px 5px 5px black</text>
        <view class="backgroundview">
          <view class="common" style="box-shadow: 5px 5px 5px black"></view>
        </view>
      </view>

      <view>
        <text>box-shadow: 5px 10px 5px black</text>
        <view class="backgroundview">
          <view class="common" style="box-shadow: 5px 10px 5px black"></view>
        </view>
      </view>

      <view>
        <text>box-shadow: 5px 5px 5px 5px black</text>
        <view class="backgroundview">
          <view class="common" style="box-shadow: 5px 5px 5px 5px black"></view>
        </view>
      </view>

      <view>
        <text>box-shadow: -5px -5px 5px black</text>
        <view class="backgroundview">
          <view class="common" style="box-shadow: -5px -5px 5px black"></view>
        </view>
      </view>

      <view>
        <text>box-shadow: inset 5px 5px black</text>
        <view class="backgroundview">
          <view class="common" style="box-shadow: inset 5px 5px black"></view>
        </view>
      </view>

      <view>
        <text>box-shadow: inset 5px 5px 5px black</text>
        <view class="backgroundview">
          <view
            class="common"
            style="box-shadow: inset 5px 5px 5px black"
          ></view>
        </view>
      </view>

      <view>
        <text>box-shadow: inset 5px 10px 5px black</text>
        <view class="backgroundview">
          <view
            class="common"
            style="box-shadow: inset 5px 10px 5px black"
          ></view>
        </view>
      </view>

      <view>
        <text>box-shadow: inset 5px 5px 5px 5px black</text>
        <view class="backgroundview">
          <view
            class="common"
            style="box-shadow: inset 5px 5px 5px 5px black"
          ></view>
        </view>
      </view>

      <view>
        <text>box-shadow: inset -5px -5px 5px black</text>
        <view class="backgroundview">
          <view
            class="common"
            style="box-shadow: inset -5px -5px 5px black"
          ></view>
        </view>
      </view>

      <view>
        <text>box-shadow: 0px 1px 3px rgba(0,0,0,0.4)</text>
        <view class="backgroundview">
          <view
            class="common"
            style="box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4)"
          ></view>
        </view>
      </view>

      <view>
        <text>circle: box-shadow: 5px 5px black</text>
        <view class="backgroundview">
          <view
            class="common"
            style="border-radius: 125rpx; box-shadow: 5px 5px black"
          ></view>
        </view>
      </view>

      <view>
        <text>circle: box-shadow: 5px 5px 5px black</text>
        <view class="backgroundview">
          <view
            class="common"
            style="border-radius: 125rpx; box-shadow: 5px 5px 5px black"
          ></view>
        </view>
      </view>

      <view>
        <text>circle: box-shadow: 5px 10px 5px black</text>
        <view class="backgroundview">
          <view
            class="common"
            style="border-radius: 125rpx; box-shadow: 5px 10px 5px black"
          ></view>
        </view>
      </view>

      <view>
        <text>circle: box-shadow: 5px 5px 5px 5px black</text>
        <view class="backgroundview">
          <view
            class="common"
            style="border-radius: 125rpx; box-shadow: 5px 5px 5px 5px black"
          ></view>
        </view>
      </view>

      <view>
        <text>circle: box-shadow: -5px -5px 5px black</text>
        <view class="backgroundview">
          <view
            class="common"
            style="border-radius: 125rpx; box-shadow: -5px -5px 5px black"
          ></view>
        </view>
      </view>

      <view>
        <text>circle: box-shadow: 0px 1px 3px rgba(0,0,0,0.4)</text>
        <view class="backgroundview">
          <view
            class="common"
            style="
              border-radius: 125rpx;
              box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
            "
          ></view>
        </view>
      </view>
    </view>
    <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<style>
.common {
  width: 250rpx;
  height: 250rpx;
  background-color: brown;
}

.backgroundview {
  width: 500rpx;
  height: 500rpx;
  background-color: white;
  justify-content: center;
  align-items: center;
}
</style>