clip-path
CSS 属性通过裁切的方式创建元件的可显示区域。区域内的部分显示,区域外的隐藏。
clip-path
属性只能设置在 <view>
元件上。
android
该属性不生效时可以尝试给目标元件添加一个透明背景,background-color: transparent
来避免裁切流程被安卓系统跳过。
clip-path
属性指定为下面列出的值中的一个。
none
不创建裁切路径。
<basic-shape>
一种形状,其大小和位置由 border-box
的值作为参考框。取值可以为下值中的任意一个:
inset()
定义一个矩形。
<length-percentage>{1, 4}
为内嵌矩形框的偏移量,表示从 border-box
的上侧、右侧、下侧和左侧向内的偏移量,这些偏移量定义了内嵌矩形边缘的位置。这些参数遵循边间距简写的语法,它允许你定义具有一个、两个或四个值的 inset。
round | (super-ellipse <exponents>) <border-radius>
可选的圆角参数,为内嵌矩形框的圆角形状,当为 round
时其形状遵照边框半径的定义,当为 super-ellipse <exponent>
时,圆角的形状为由 <exponent>
定义的系数的拉梅曲线。<border-radius>
为使用边框半径简写语法为内嵌矩形的圆角或者拉梅曲线圆角的半径。
<exponent>
拉梅曲线的两个曲线系数,按照顺序依次是 m 和 n。
circle()
定义一个圆形(使用一个半径和一个圆心位置)。
<length-percentage>
这个值用于定义圆形的半径。
<position>
用于移动圆的中心。可以是一个 <length>
值,或者是一个 <percentage>
值,或者是类似 left
的值。如果省略了 <position>
值,则默认为中心。
ellipse()
定义一个椭圆(使用两个半径和一个圆心位置)。
椭圆本质上是一个扁平的圆形,因此 ellipse() 的行为与 circle() 非常相似,只是我们需要指定两个半径 x 和 y。
<radial-size>
两个半径,按顺序是 x 和 y。可以是 <length>
或 <percentage>
。
<position>
移动椭圆的中心。可以是 <length>
或 <percentage>
,或者类似 left
这样的值。如果省略 <position>
值,则默认为中心。
path()
定义一个任意形状(使用一个 SVG 路径定义)。
path()
函数接受 SVG 路径字符串作为参数。
初始值 | none |
适用元素 | view |
是否支持继承 | no |
是否支持动画 | no |
inset()
函数可以使用 super-ellipse
定义超椭圆圆角。polygon()
函数。path()
函数不支持 <clip-rule>
定义裁切规则。LCD tables only load in the browser