<gradient>
渐变图像类型 <gradient>
用于表现两种或多种颜色的过渡转变。
<gradient>
没有内在尺寸;即,不具备固有或首选的尺寸,也不具备首选的比率。其实际的大小取决于其填充元件的大小。
该数据类型通常用于 background
,background-image
,background-color
等属性之中。
<gradient>
数据类型由下列渐变函数定义。
颜色值沿着一条隐式的直线逐渐过渡。由 linear-gradient()
产生。
<side-or-corner>
描述渐变线的起始点位置。
它包含 to
和两个关键词:第一个指出水平位置 left or right,第二个指出垂直位置 top or bottom。关键词的先后顺序无影响,且都是可选的。
to top
, to bottom
, to left
和 to right
这些值会被转换成角度 0
度、180
度、270
度和 90
度。其余值会被转换为一个以向顶部中央方向为起点顺时针旋转的角度。渐变线的结束点与其起点中心对称。
<angle>
用角度值指定渐变的方向(或角度)。角度顺时针增加。
<color-stop>
由一个 <color>
值组成,并且跟随着一个可选的终点位置,位置是一个 [<percentage>
] 值,描述沿渐变方向的偏移量。
颜色值由一个中心点(原点)向外扩散并逐渐过渡到其他颜色值。由 radial-gradient()
函数产生。
<position>
<position>
与 background-position
或者 transform-origin
类似。如缺省,默认为中心点。
<shape>
渐变的形状。圆形(circle
)或椭圆形(ellipse
)。默认值为椭圆。
<size>
确定渐变的最终形状的大小。
<extent-keyword>
当渐变的最终形状大小是在某个方向上的无限延伸,而不是有限的线段时,可以使用关键字来描述渐变形状的大小,默认为 farthest-corner
。
关键字 | 描述 |
---|---|
closest-side | 渐变的边缘形状与容器距离渐变中心点最近的一边相切(圆形)或者至少与距离渐变中心点最近的垂直和水平边相切(椭圆)。 |
closest-corner | 渐变的边缘形状与容器距离渐变中心点最近的一个角相交。 |
farthest-side | 与 closest-side 相反,边缘形状与容器距离渐变中心点最远的一边相切(或最远的垂直和水平边)。 |
farthest-corner | 渐变的边缘形状与容器距离渐变中心点最远的一个角相交。 |
<color-stop>
同 linear-gradient
的描述。
LCD tables only load in the browser