gradient属性,gravity属性

http://www.itjxue.com  2023-01-12 22:49  来源:未知  点击次数: 

Android View — Gradient 渐变

Android 支持三种颜色渐变, LinearGradient(线性渐变) RadialGradient (径向渐变) SweepGradient(扫描渐变)。这三种渐变继承自android.graphics.Shader, Paint 类通过setShader支持渐变。

线性渐变就是在线性方向的的渐变。有两个构造函数,

第二种 构造函数是第一种的简化版,只支持两种颜色。

RadialGradient 是圆环一样的的渐变,RadialGradient 同样是两个构造函数,

1.float centerX, float centerY 渐变的中心点 圆心

2.float radius 渐变的半径

3.int[] colors 渐变颜色数组

4.float[] stops 和颜色数组对应, 每种颜色在渐变方向上所占的百分比取值[0, 1]

5.Shader.TileMode tileMode 表示绘制完成,还有剩余空间的话的绘制模式。

1.float centerX, float centerY 渐变的中心点 圆心

2.float radius 渐变的半径

3.int centerColor, int edgeColor 中心点颜色和边缘颜色

4.Shader.TileMode tileMode 表示绘制完成,还有剩余空间的话的绘制模式

SweepGradient 是和角度有关的渐变。以某一点为圆心,随着角度的大小发生渐变。

1.float cx, float cy 中心点坐标

2.int[] colors 颜色数组

3.float[] positions 数组颜色在渐变方向上所占的百分比

1.float cx, float cy 中心点坐标

2.int color0, int color1 开始颜色 结束颜色

在LinearGradient RadialGradient 渐变中,构造函数的最后一个参数为 Shader.TileMode 类型,决定了如果View还有剩余空间,如何绘制。

从上到下依次为:CLAMP REPEAT MIRROR

从上到下依次为:CLAMP REPEAT MIRROR

一些背景的渐变通过定义 Shape Drawable 来实现。Shape Drawable 有gradient 属性。

css3渐变属性有哪些

CSS3 定义了两种类型的渐变(gradients):

线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向

语法:background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

径向渐变(Radial Gradients)- 由它们的中心定义

语法:background-image: linear-gradient(angle, color-stop1, color-stop2);

gradient渐变属性设置

常用的渐变有

(1)linear-gradient()线性渐变

(2)radial-gradient()径向渐变

(3)conic-gradient()(大部分浏览器站不支持)梯度渐变;

(4)repeating-linear-gradient()、repeating-radial-gradient()、repeating-conic-gradient(),这个就不用解释了吧;

基础语法: linear-gradient( angle, start-color position, end-color position);

参数设置:

start-color 是渐变的初始颜色

end-color 是结束的颜色,这些颜色统称为色标

angle 是渐变的角度,可以是具体的角度(45deg),也可以是 to + 方向(to bottom right)

position 是具体位置,可以使用px,百分比,建议使用百分比;

语法: radial-gradient(shape rx ry at position, start-color, end-color )

参数设置:

shape:形状(ellipse - 椭圆 (默认值)、circle - 正圆)

rx,ry半径大小:rx(x轴半径),ry(y轴半径),也可以使用关键词表示closest-side(圆形到最近的边的距离)、closest-corner(圆形到最近的角的距离)、farthest-side(圆形到最远变的距离)、farthest-corner(圆形到最远角的距离)

positon圆心位置:at x y或是at bottom right ,也可以使用px,百分比

color:色值

例如:

基础语法: conic-gradient(from angle at position ,color1 angle,color2 angle,color3 angle)

常用参数: form以角度为值,定义梯度旋转;position以坐标x,y位置,定义圆形位置

同比可以使用repeating-conic-gradient();

暂时只有chorm69,opear,safari,android webview支持该属性

backgroundlinear-gradient的属性值怎么写

在CSS中background: -moz-linear-gradient 让网站背景渐变的属性,目前火狐3.6以上版本和google浏览器支持这个属性。

background: -moz-linear-gradient(top, #bccfe3 0%, #d2dded 100%); 适合 FF3.6+

background: -webkit- gradient(linear, left top, left bottom, color-stop(0%,#bccfe3), color- stop(100%,#d2dded)); 适合 Chrome,Safari4+

background: -webkit-linear-gradient(top, #bccfe3 0%,#d2dded 100%); 适合Chrome10+,Safari5.1+

background: -o-linear-gradient(top, #bccfe3 0%,#d2dded 100%); 适合Opera 11.10+

background: -ms-linear-gradient(top, #bccfe3 0%,#d2dded 100%); 适合IE10+

background: linear-gradient(top, #bccfe3 0%,#d2dded 100%); 适合W3C

背景使用CSS渐变显示可以不使用图像就实现两个或两个以上的指定颜色的平滑过渡。这反过来又减少了下载时间和带宽的使用,放大时也比较好看,可以让您创造出一个更灵活的布局。

Firefox支持两种类型的CSS渐变:线性的(-moz-linear-gradient)和放射状的(-moz-radial-gradient)。

(责任编辑:IT教学网)

更多

推荐软件水平考试文章