参考
backfaceVisibility
| 类型 |
|---|
枚举('visible', 'hidden') |
backgroundColor
borderBottomColor
borderBlockColor
borderBlockEndColor
borderBlockStartColor
borderBottomEndRadius
borderBottomLeftRadius
borderBottomRightRadius
borderBottomStartRadius
borderStartEndRadius
borderStartStartRadius
borderEndEndRadius
borderEndStartRadius
borderBottomWidth
borderColor
borderCurve
iOS
在 iOS 13+ 上,可以更改边框的角曲线。
| 类型 |
|---|
枚举('circular', 'continuous') |
borderEndColor
borderLeftColor
borderLeftWidth
borderRadius
如果圆形边框不可见,请尝试同时应用 overflow: 'hidden'。
borderRightColor
borderRightWidth
borderStartColor
borderStyle
| 类型 |
|---|
枚举('solid', 'dotted', 'dashed') |
borderTopColor
borderTopEndRadius
borderTopLeftRadius
borderTopRightRadius
borderTopStartRadius
borderTopWidth
borderWidth
boxShadow
boxShadow 仅在新架构 New Architecture 上可用。外阴影仅在 Android 9+ 上支持。内阴影仅在 Android 10+ 上支持。
为元素添加阴影效果,能够控制阴影的位置、颜色、大小和模糊度。此阴影根据是否为“内阴影”而出现在元素的边框盒外部或内部。这是对同名 web 样式属性的规范兼容实现。在 BoxShadowValue 文档中阅读有关所有可用参数的更多信息。
这些阴影可以组合在一起,因此单个 boxShadow 可以由多个不同的阴影组成。
boxShadow 接受模仿 web 语法的字符串,或者一个 BoxShadowValue 对象数组。
| 类型 |
|---|
| BoxShadowValue 对象数组 | 字符串 |
cursor
iOS
在 iOS 17+ 上,将此属性设置为 pointer 允许当指针(例如 iOS 上的触控板或触控笔,或 visionOS 上的用户凝视)悬停在视图上时出现悬停效果。
elevation
Android
使用 Android 底层 elevation API 设置视图的海拔高度。这会为项目添加一个投影,并影响重叠视图的 z 轴顺序。仅在 Android 5.0+ 上支持,对早期版本无效。
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 语法的字符串。
| 类型 |
|---|
对象数组:{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} 或字符串 |
opacity
outlineColor
设置元素轮廓的颜色。有关更多详细信息,请参阅 web 文档。
outlineOffset
设置轮廓与元素边界之间的空间量。不影响布局。有关更多详细信息,请参阅 web 文档。
outlineStyle
设置元素轮廓的样式。有关更多详细信息,请参阅 web 文档。
| 类型 |
|---|
枚举('solid', 'dotted', 'dashed') |
outlineWidth
绘制在元素周围、边框外部的轮廓宽度。不影响布局。有关更多详细信息,请参阅 web 文档。
pointerEvents
控制 View 是否可以成为触摸事件的目标。
'auto': 视图可以成为触摸事件的目标。
'none': 视图绝不会成为触摸事件的目标。
'box-none': 视图绝不会成为触摸事件的目标,但其子视图可以。
'box-only': 视图可以成为触摸事件的目标,但其子视图不能。
| 类型 |
|---|
枚举('auto', 'box-none', 'box-only', 'none' ) |