uni-app
uni-app x
uniCloud
HBuilder
uni 小程序 sdk
uni-app x
uni-app
uni-app x
uniCloud
HBuilder
uni 小程序 sdk
简体中文
CSS
box-shadow
uni-app x 兼容性
语法
值限制
box-shadow 的属性值
示例
App平台差异
参见

# box-shadow

CSS box-shadow 属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。该属性可设置的值包括阴影的 X 轴偏移量、Y 轴偏移量、模糊半径、扩散半径和颜色。

# uni-app x 兼容性

Web Android iOS HarmonyOS
4.0 3.9 4.11 4.61

# 语法

box-shadow: none | <shadow>#;

# 值限制

  • enum
  • length
  • length-function
  • color

# box-shadow 的属性值

名称 兼容性 描述
inset
如果没有指定inset，默认阴影在边框外，即阴影向外扩散。
使用 inset 关键字会使得阴影落在盒子内部，这样看起来就像是内容被压低了。此时阴影会在边框之内 (即使是透明边框）、背景之上、内容之下。
none
No shadow.

# 示例

示例为hello uni-app x alpha分支，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例另见

扫码体验（手机浏览器跳转到App直达页）

示例

<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 rgba(0, 0, 0, 0.5)</text>
        <view class="backgroundview">
          <view class="common" style="box-shadow: 5px 5px 5px rgba(0, 0, 0, 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() {
      this.$nextTick(() => {
        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>

# App平台差异

  • app平台 默认阴影颜色为黑色（#000000）
  • app-ios平台 box-shadow 和 overflow: hidden 不能同时设置，添加了阴影会导致 overflow：hidden 失效
  • app-ios平台 设置box-shadow的view背景无法透明，因为iOS系统 box-shadow 是在view的背景下绘制的，当view背景色为透明时，背景将显示box-shadow的颜色，因此为避免此差异建议给box-shadow的view设置非透明背景色
  • app-Harmony 平台不支持 inset 和阴影扩散半径

# 参见

本页导读
box-shadow
uni-app x 兼容性
语法
值限制
box-shadow 的属性值
示例
App平台差异
参见