跳至主内容

视图样式属性

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

示例​

参考

属性​

backfaceVisibility​

Type
enum('visible', 'hidden')

backgroundColor​

Type
color

borderBottomColor​

Type
color

borderBlockColor​

Type
color

borderBlockEndColor​

Type
color

borderBlockStartColor​

Type
color

borderBottomEndRadius​

Type
number, string (percentage value)

borderBottomLeftRadius​

Type
number, string (percentage value)

borderBottomRightRadius​

Type
number, string (percentage value)

borderBottomStartRadius​

Type
number, string (percentage value)

borderStartEndRadius​

Type
number, string (percentage value)

borderStartStartRadius​

Type
number, string (percentage value)

borderEndEndRadius​

Type
number, string (percentage value)

borderEndStartRadius​

Type
number, string (percentage value)

borderBottomWidth​

Type
number

borderColor​

Type
color

borderCurve
iOS
​

在 iOS 13+ 系统上，可以更改边框的角曲线样式。

Type
enum('circular', 'continuous')

borderEndColor​

Type
color

borderLeftColor​

Type
color

borderLeftWidth​

Type
number

borderRadius​

如果圆角边框未显示，请尝试同时设置 overflow: 'hidden'。

Type
number, string (percentage value)

borderRightColor​

Type
color

borderRightWidth​

Type
number

borderStartColor​

Type
color

borderStyle​

Type
enum('solid', 'dotted', 'dashed')

borderTopColor​

Type
color

borderTopEndRadius​

Type
number, string (percentage value)

borderTopLeftRadius​

Type
number, string (percentage value)

borderTopRightRadius​

Type
number, string (percentage value)

borderTopStartRadius​

Type
number, string (percentage value)

borderTopWidth​

Type
number, string (percentage value)

borderWidth​

Type
number

boxShadow​

备注

boxShadow 仅在新架构中可用。外阴影仅在 Android 9+ 上受支持，内阴影仅在 Android 10+ 上受支持。

为元素添加阴影效果，可控制阴影的位置、颜色、尺寸和模糊度。根据阴影是否为 inset（内嵌），阴影将出现在元素边框盒的外部或内部。这是对同名 web 样式属性的规范兼容实现。所有可用参数的详细信息请参阅 BoxShadowValue 文档。

多个阴影可以组合使用，因此单个 boxShadow 属性可包含多个不同的阴影效果。

boxShadow 接受两种形式：模拟 web 语法的字符串，或由 BoxShadowValue 对象组成的数组。

Type
array of BoxShadowValue objects | string

cursor
iOS
​

在 iOS 17+ 中，设置为 pointer 可在指针（如 iOS 上的触控板或手写笔，或 visionOS 上的用户视线）悬停于视图上时启用悬停效果。

Type
enum('auto', 'pointer')

elevation
Android
​

使用 Android 底层的 高程 API 设置视图的高程。这会为元素添加投影效果，并影响重叠视图的 z 轴顺序。仅支持 Android 5.0+ 版本，在更早版本中无效。

Type
number

filter​

备注

filter 仅在新架构中可用

为 View 添加图形滤镜效果。该滤镜由任意数量的 滤镜函数 组成，每个函数代表对 View 图形构成的原子级修改。完整滤镜函数列表见下文。filter 效果将同时作用于 View 的子元素以及 View 本身，且 filter 会默认启用 overflow: hidden，因此子元素将被裁剪至 View 边界范围内。

以下滤镜函数在所有平台通用：

  • brightness：调整 View 的亮度。接受非负数或百分比。

  • opacity：调整 View 的不透明度（alpha 值）。接受非负数或百分比。

备注

由于性能和规范遵循问题，iOS 仅支持上述两个滤镜函数。计划探索使用 SwiftUI 替代 UIKit 实现此功能的解决方案。

Android

以下滤镜函数仅限 Android 平台：

  • blur：使用高斯模糊对 View 进行模糊处理，指定的长度表示模糊算法中使用的半径。接受任何非负的 DIP 值（不支持百分比）。值越大，模糊效果越明显。

  • contrast：调整 View 的对比度。接受非负数或百分比。

  • dropShadow：在 View 的 alpha 遮罩周围添加阴影（仅 View 中 alpha 值非零的像素会产生阴影）。接受可选的颜色参数表示阴影颜色，以及 2 或 3 个长度值。若指定 2 个长度值，则解释为 offsetX 和 offsetY（分别控制阴影在 X/Y 轴上的偏移量）；若指定第 3 个长度值，则解释为高斯模糊的标准差——值越大阴影越模糊。参数详情请参阅 DropShadowValue。

  • grayscale：按指定量将 View 转换为灰度图像。接受非负数或百分比，其中 1 或 100% 表示完全灰度。

  • hueRotate: 改变视图的色调。该函数的参数定义色轮旋转角度（例如360deg表示无变化），支持deg或rad单位。

  • invert: 反转View中的颜色。接受非负数或百分比（1或100%表示完全反转）。

  • sepia: 将View转换为深褐色调。接受非负数或百分比（1或100%表示完全转换）。

  • saturate: 改变 View 的饱和度。接受非负数或百分比。

备注

blur和dropShadow仅支持 Android 12+

filter 可接受由上述滤镜函数组成的对象数组，或模拟 web 语法的字符串。

Type
array of objects: {brightness: number|string}, {opacity: number|string}, {blur: number|string}, {contrast: number|string}, {dropShadow: DropShadowValue|string}, {grayscale: number|string}, {hueRotate: number|string}, {invert: number|string}, {sepia: number|string}, {saturate: number|string} or string

mixBlendMode​

备注

mixBlendMode 仅在新架构中可用

控制 View 如何与其堆叠上下文中的其他元素进行颜色混合。查看 MDN 文档获取每种混合函数的完整说明。

如需更精细地控制混合范围，请参阅 isolation。

混合模式取值​

  • normal：元素直接覆盖背景，无混合效果

  • multiply：源色与目标色相乘后替换目标

  • screen：对背景色与源色的补色相乘后取补色

  • overlay：根据背景色值进行乘色或滤色混合

  • darken：取背景色与源色的较暗值

  • lighten: 选择背景色和源颜色中较亮的一种

  • color-dodge：提亮背景色以映射源色（黑色绘制无变化）

  • color-burn：压暗背景色以映射源色（白色绘制无变化）

  • hard-light：根据源色值进行乘色或滤色（类似聚光灯照射效果）

  • soft-light：根据源色值加深或减淡颜色（类似柔光灯照射效果）

  • difference：从较亮色中减去较暗的组成色

  • exclusion：效果类似差值模式但对比度更低

  • hue：使用源色相的色调，并保留背景色的饱和度和亮度。

  • saturation：使用源色相的饱和度，并保留背景色的色调和亮度。

  • color：使用源色相的色调和饱和度，并保留背景色的亮度。此模式会保留背景的灰度层次，适用于单色图像着色或彩色图像色调调整。

  • luminosity：使用源色相的亮度，并保留背景色的色调和饱和度。此模式会产生与颜色模式相反的效果。

Type
enum('normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity')

opacity​

Type
number

outlineColor​

备注

outlineColor仅在新架构中可用

设置元素轮廓的颜色，详见网页文档。

Type
color

outlineOffset​

备注

outlineOffset仅在新架构中可用

设置轮廓与元素边界间的间距（不影响布局），详见网页文档。

Type
number

outlineStyle​

备注

outlineStyle仅在新架构中可用

设置元素轮廓的样式，详见网页文档。

Type
enum('solid', 'dotted', 'dashed')

outlineWidth​

备注

outlineWidth仅在新架构中可用

设置在元素边框外绘制的轮廓宽度（不影响布局），详见网页文档。

Type
number

pointerEvents​

控制 View 是否可以接收触摸事件

  • 'auto': 视图可接收触摸事件

  • 'none': 视图永不接收触摸事件

  • 'box-none': 视图永不接收触摸事件，但其子视图可接收

  • 'box-only': 视图可接收触摸事件，但其子视图不可接收

Type
enum('auto', 'box-none', 'box-only', 'none' )