box-shadow

# box-shadow

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

# uni-app x 兼容性

Web	Android	iOS
4.0	3.9	4.11

# 浏览器兼容性

Chrome	Edge	Firefox	Opera	Safari	IE
√（ 10 ）	√（ 12 ）	√（ 4 ）	√（ 10.5 ）	√（ 5.1 ）	√（ 9 ）

# 语法

box-shadow: none | <shadow>#;

# box-shadow 的属性值

名称

兼容性

描述

inset

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

none

No shadow.

# 示例

hello uni-app x

Template

Script

<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: 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>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>



<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-ios平台 box-shadow 和 overflow: hidden 不能同时设置，添加了阴影会导致 overflow：hidden 失效.
app-ios平台设置box-shadow的view背景无法透明，因为iOS系统 box-shadow 是在view的背景下绘制的，当view背景色为透明时，背景将显示box-shadow的颜色，因此为避免此差异建议给box-shadow的view设置非透明背景色