EveryLike/pages/CSS/box-shadow/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 #00FF00</text>
        <view class="backgroundview">
          <view class="common" style="box-shadow: 5px 5px 5px #00FF00"></view>
        </view>
      </view>

      <view>
        <text>box-shadow: 5px 5px 5px rgb(0,0,255)</text>
        <view class="backgroundview">
          <view class="common" style="box-shadow: 5px 5px 5px rgb(0,0,255)"></view>
        </view>
      </view>

      <view>
        <text>box-shadow: 5px 5px 5px rgba(0,255,255,0.5)</text>
        <view class="backgroundview">
          <view class="common" style="box-shadow: 5px 5px 5px rgba(0,255,255,0.5)"></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（harmony暂不支持阴影扩散半径）</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（harmony暂不支持inset）</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（harmony暂不支持inset）</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（harmony暂不支持inset）</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（harmony暂不支持inset）</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（harmony暂不支持inset）</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: 62px; 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: 62px; 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: 62px; 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: 62px; 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: 62px; 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: 62px;
              box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
            "></view>
        </view>
      </view>

      <view>
        <text>点击动态切换 box-shadow: none</text>
        <view class="backgroundview" @click="changed">
          <view :class="['common', disabled ? 'disabledShadow' : 'shadow']"></view>
        </view>
      </view>

      <view>
        <text>点击动态切换 box-shadow: 非法值</text>
        <view class="backgroundview" @click="changed">
          <view :class="['common', disabled ? 'invalidShadow' : 'shadow']"></view>
        </view>
      </view>

      <view>
        <text>box-shadow父视图动态改变高度的渲染效果</text>
        <view class="backgroundview">
          <view
          	style="justify-content: center;align-items: center;width: 150px;background-color: red;box-shadow: 0 0 10px">
          	<view>
          		<textarea id="dynamic-height-textarea" style="margin: 20px;background-color: aqua;height: 32px;width: 110px;"
          			value="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"></textarea>
          	</view>
          </view>
        </view>
      </view>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script>
  export default {
    data() {
      return {
        disabled: false
      }
    },
    onReady() {
      let element = uni.getElementById("dynamic-height-textarea")
      element?.style.setProperty("height", "52px")
    },
    methods: {
      changed() {
        this.disabled = !this.disabled
      }
    },
  }
</script>

<style>
  .common {
    width: 125px;
    height: 125px;
    background-color: brown;
  }

  .backgroundview {
    width: 250px;
    height: 250px;
    background-color: white;
    justify-content: center;
    align-items: center;
  }

  .shadow {
    box-shadow: 5px 5px black;
  }

  .disabledShadow {
    box-shadow: none;
  }

  .invalidShadow {
    box-shadow: abcd;
  }
</style>