如何为应用背景添加类似指定示例图的阴影或渐变效果？

根据你提供的示例效果，以下是不同平台下的具体实现方案：

Web 端（CSS） #

渐变背景 #

使用linear-gradient定义线性渐变背景，可根据示例调整色值和方向：

.app-container {
  /* 从上到下的浅灰到深灰渐变 */
  background: linear-gradient(180deg, #f5f5f5 0%, #e0e0e0 100%);
}

阴影效果 #

通过box-shadow添加柔和的外阴影，参数可按需调整：

.app-container {
  /* 水平偏移0，垂直偏移4px，模糊半径12px，阴影透明度0.15 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

组合效果（渐变+阴影+圆角） #

将两者结合，再添加圆角更贴近示例样式：

.app-container {
  background: linear-gradient(180deg, #f5f5f5 0%, #e0e0e0 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
}

Android 端 #

渐变背景 #

在res/drawable目录下创建bg_gradient.xml文件：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:angle="180"
        android:startColor="#f5f5f5"
        android:endColor="#e0e0e0" />
    <corners android:radius="8dp" />
</shape>

在布局中引用该背景：

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/bg_gradient">
    <!-- 应用内容 -->
</LinearLayout>

阴影+渐变组合 #

借助CardView实现阴影效果，同时搭配渐变背景：

<androidx.cardview.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:cardElevation="4dp"
    app:cardCornerRadius="8dp">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/bg_gradient">
        <!-- 应用内容 -->
    </LinearLayout>
</androidx.cardview.widget.CardView>

iOS 端 #

渐变背景 #

使用CAGradientLayer添加渐变：

let gradientLayer = CAGradientLayer()
gradientLayer.colors = [UIColor(red: 245/255, green: 245/255, blue: 245/255, alpha: 1).cgColor,
                        UIColor(red: 224/255, green: 224/255, blue: 224/255, alpha: 1).cgColor]
gradientLayer.startPoint = CGPoint(x: 0.5, y: 0)
gradientLayer.endPoint = CGPoint(x: 0.5, y: 1)
gradientLayer.frame = view.bounds
view.layer.insertSublayer(gradientLayer, at: 0)

阴影效果 #

设置视图层的阴影属性：

view.layer.shadowColor = UIColor.black.cgColor
view.layer.shadowOffset = CGSize(width: 0, height: 4)
view.layer.shadowRadius = 6
view.layer.shadowOpacity = 0.15
// 开启圆角时需关闭maskToBounds，避免阴影被裁剪
view.layer.cornerRadius = 8
view.layer.masksToBounds = false

组合效果 #

将上述两段代码结合即可实现渐变+阴影的组合样式，注意渐变层要插入到视图层的最底部。

内容的提问来源于stack exchange，提问作者monkmood