单位

本文介绍了蚂蚁动态卡片在数值、时间、长度和颜色等方面的定义。

数值单位

卡片中有一些属性需执行纯数值单位,比如 flex,lines 等,此时数值后不加 px、vw 等单位。

纯数值的取值范围和取值类型,请参见 通用样式 中各组件的属性定义。如果遇到非纯数值,则默认按照 0 处理。

示例:

lines:5;
flex:1;

时间单位

卡片有部分属性需要用时间描述,例如:animation-duration。卡片支持以秒、毫秒为时间单位。

示例:

animation-duration:2s;

长度单位

卡片有几种不同的单位表示长度,长度由一个数字和单位组成,数字和单位之间不能出现空格,长度单位分为内置单位和自定义单位。

内置单位

相对长度

相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用

  • vw:viewpoint width,视窗宽度,1vw=视窗宽度的 1%。

  • %:视窗高/宽度的百分比。

示例:

font-size: 20vw;
background-size:50%;

绝对长度

绝对长度单位是一个固定的值,它反应一个真实的物理尺寸。绝对长度单位视输出介质而定,不依赖于环境(显示器、分辨率、操作系统等)

  • px:像素 (1px = 1/96th of 1in)

  • rpx:以 750 为基准计算,2rpx = 1px

示例:

font-size: 17px;
line-height:40rpx;

单击此处 detailLength.zip 获取完整示例代码。

颜色单位

卡片中的颜色可以通过以下方法进行指定:

  • 十六进制

  • RGB 颜色

  • 颜色名称

十六进制颜色

指定一个十六进制的颜色的组成部分有几种方式:

  • #RRGGBB,其中 RR(红色),GG(绿色)和 BB(蓝色)。所有值必须介于 0 和 FF 之间。

例如,#0000FF 值呈现为蓝色,因为蓝色的组成设置为最高值 FF 而其他设置为 0。

  • #RGB,其中 R(红色),G(绿色)和 B(蓝色)。所有值必须介于 0 和 F 之间。

例如,#00F 值呈现为蓝色,因为蓝色的组成设置为最高值 F 而其他设置为 0。

  • 0xrrggbb,其中 rr(红色),gg(绿色)和 bb(蓝色)。所有值必须介于 0 和 ff 之间。

例如,0x0000ff 值呈现为蓝色,因为蓝色的组成设置为最高值 ff 而其他设置为 0。

示例:

background-color:#ff0000;
border-top-color:0x0000ff;
border-bottom-color:#00f;

RGB 颜色

指定一个 RGB 的颜色其组成部分有几种方式:

  • RGB(红、绿、蓝)。每个参数(红色,绿色和蓝色)定义颜色的亮度,为 0 和 255 之间的整数。例如RGB(0,0,255)值呈现为蓝色,因为蓝色的参数设置为最高值 255 而其他设置为 0。

  • RGBA(红、绿、蓝,alpha)。Alpha 参数是一个介于 0.0(完全透明)和 1.0(完全不透明)之间的参数。例如 RGB(0,0,255,0.5)值呈现为半透明的蓝色。

示例:

background-color:rgb(0,0,255);
border-color:rgba(255,0,0,0.5);

颜色名称

卡片支持 147 种颜色名称定义,包括 17 个标准色和 130 个其他颜色。下表列出了所有颜色的名称和对应的十六进制值。

标准色

名称

十六进制

red

0xffff0000

blue

0xff0000ff

black

0xff000000

……

……

其他

名称

十六进制

red

0xffff0000

blue

0xff0000ff

black

0xff000000

……

……

示例

background-color:red;
说明

  • 只有上面列出的颜色格式被支持,其他的颜色格式均不被支持。

  • 如果遇到不被支持的颜色格式,卡片将按照默认透明色处理(部分样式有独立的默认色规则除外)。

单击此处 detailColor.zip 获取完整示例代码。

附录-色值定义

名称

色值

red

0xffff0000

darkred

0xff8b0000

tan

0xffd2b48c

linen

0xfffaf0e6

sienna

0xffa0522d

indianred

0xffcd5c5c

teal

0xff008080

grey

0xff808080

green

0xff008000

gray

0xff808080

darkgrey

0xffa9a9a9

darkgreen

0xff006400

beige

0xfff5f5dc

orange

0xffffa500

darkgray

0xffa9a9a9

orangered

0xffff4500

khaki

0xfff0e68c

seagreen

0xff2e8b57

gold

0xffffd700

darkorange

0xffff8c00

darkkhaki

0xffbdb76b

indigo

0xff4b0082

goldenrod

0xffdaa520

maroon

0xff800000

gainsboro

0xffdcdcdc

lime

0xff00ff00

greenyellow

0xffadff2f

darkgoldenrod

0xffb8860b

slategrey

0xff708090

slategray

0xff708090

salmon

0xfffa8072

darkseagreen

0xff8fbc8f

seashell

0xfffff5ee

darksalmon

0xffe9967a

tomato

0xffff6347

thistle

0xffd8bfd8

darkslategrey

0xff2f4f4f

cyan

0xff00ffff

forestgreen

0xff228b22

dimgrey

0xff696969

darkslategray

0xff2f4f4f

mistyrose

0xffffe4e1

dimgray

0xff696969

darkcyan

0xff008b8b

black

0xff000000

magenta

0xffff00ff

limegreen

0xff32cd32

coral

0xffff7f50

darkmagenta

0xff8b008b

azure

0xfff0ffff

blue

0xff0000ff

oldlace

0xfffdf5e6

cornsilk

0xfffff8dc

darkblue

0xff00008b

skyblue

0xff87ceeb

firebrick

0xffb22222

orchid

0xffda70d6

lightgrey

0xffd3d3d3

lightgreen

0xff90ee90

lightyellow

0xffffffe0

lightgray

0xffd3d3d3

darkorchid

0xff9932cc

royalblue

0xff4169e1

aqua

0xff00ffff

steelblue

0xff4682b4

bisque

0xffffe4c4

crimson

0xffdc143c

slateblue

0xff6a5acd

dodgerblue

0xff1e90ff

blanchedalmond

0xffffebcd

lightseagreen

0xff20b2aa

lightslategrey

0xff778899

lightslategray

0xff778899

brown

0xffa52a2a

lightsalmon

0xffffa07a

snow

0xfffffafa

lightcyan

0xffe0ffff

rosybrown

0xffbc8f8f

sandybrown

0xfff4a460

darkslateblue

0xff483d8b

yellow

0xffffff00

lightcoral

0xfff08080

mintcream

0xfff5fffa

aquamarine

0xff7fffd4

saddlebrown

0xff8b4513

honeydew

0xfff0fff0

pink

0xffffc0cb

lightblue

0xffadd8e6

cadetblue

0xff5f9ea0

wheat

0xfff5deb3

lawngreen

0xff7cfc00

white

0xffffffff

aliceblue

0xfff0f8ff

chocolate

0xffd2691e

yellowgreen

0xff9acd32

moccasin

0xffffe4b5

navy

0xff000080

chartreuse

0xff7fff00

ivory

0xfffffff0

palegreen

0xff98fb98

lavender

0xffe6e6fa

hotpink

0xffff69b4

olive

0xff808000

fuchsia

0xffff00ff

mediumseagreen

0xff3cb371

silver

0xffc0c0c0

olivedrab

0xff6b8e23

darkturquoise

0xff00ced1

turquoise

0xff40e0d0

violet

0xffee82ee

violetred

0xffd02090

darkviolet

0xff9400d3

palegoldenrod

0xffeee8aa

whitesmoke

0xfff5f5f5

springgreen

0xff00ff7f

burlywood

0xffdeb887

peru

0xffcd853f

floralwhite

0xfffffaf0

lightpink

0xffffb6c1

darkolivegreen

0xff556b2f

ghostwhite

0xfff8f8ff

mediumblue

0xff0000cd

mediumorchid

0xffba55d3

lightsteelblue

0xffb0c4de

lightslateblue

0xff8470ff

transparent

0x00000000

deepskyblue

0xff00bfff

lightskyblue

0xff87cefa

lightgoldenrodyellow

0xfffafad2

plum

0xffdda0dd

mediumaquamarine

0xff66cdaa

mediumslateblue

0xff7b68ee

blueviolet

0xff8a2be2

midnightblue

0xff191970

deeppink

0xffff1493

lemonchiffon

0xfffffacd

antiquewhite

0xfffaebd7

paleturquoise

0xffafeeee

powderblue

0xffb0e0e6

navajowhite

0xffffdead

mediumspringgreen

0xff00fa9a

cornflowerblue

0xff6495ed

palevioletred

0xffdb7093

mediumvioletred

0xffc71585

purple

0xff800080

rebeccapurple

0xff663399

lavenderblush

0xfffff0f5

mediumturquoise

0xff48d1cc

peachpuff

0xffffdab9

mediumpurple

0xff9370db

papayawhip

0xffffefd5

阿里云首页 移动开发平台 mPaaS 相关技术圈