Panorama 样式属性

Panorama支持HTML5 CSS属性的一个子集，同时也加入了一些自订的CSS属性。在可能的情况下，Panorama都会试图接近W3C的规范，即通过名称来寻找网页上的属性。绝大多数情况下这都是一个很好的方法。

所有最新的Panorama属性都可以通过运“dump_panorama_css_properties”命令来获取。这条命令会打印整个属性列表及其说明。

中文版本的CSS属性集正在持续更新中。

受支持的伪类选择器

:hover - 鼠标悬停于板上。
:focus - 板获得键盘聚焦。
:active - 板正在被使用（鼠标在板上按下）。
:disabled - 板被禁用。
:enabled - 板被启用。
:inspect - 板正在被debugger检视。
:selected - 板被选中（按钮被勾选）。
:descendantfocus - 板的某个子板获得了键盘聚焦。
:parentdisabled - 板的所属板被禁用，导致板被间接禁用。
:layoutloading - panel is in-progress loading it's layout file and thus may want to display specially
:layoutfailed - panel failed to load requested layout file, and thus may want to display specially
:activationdisabled - 板被禁止激活，但是能仍然能获得聚焦（普通禁用会禁止所有输入/聚焦）。

属性列表

特性	说明
@keyframes(en)	动作关键帧
@define(en)	自定义变量
-s2-mix-blend-mode(en)
align(en)	排列
animation(en)	动画
animation-delay(en)	动画延迟
animation-direction(en)	动画方向
animation-duration(en)	动画持续时间
animation-fill-mode(en)
animation-iteration-count(en)	动画循环计数
animation-name(en)	动画命名
animation-timing-function(en)	动画计时功能
background-blur(en)	背景颜色
background-color-opacity(en)	背景颜色不透明度
background-image(en)	背景图片
background-img-opacity(en)	背景图片不透明度
background-position(en)	背景位置
background-repeat(en)	背景重复
background-size(en)	背景尺寸
blur(en)	模糊
border(en)	边界
border-bottom(en)	底边界
border-bottom-color(en)	底边颜色
border-bottom-left-radius(en)	左下边框圆弧半径
border-bottom-right-radius(en)	右下边框圆弧半径
border-bottom-style(en)	底边界款式
border-bottom-width(en)	底边界宽度
border-brush(en)
border-color(en)	边界颜色
border-left(en)	左边界
border-left-color(en)	左边界颜色
border-left-style(en)	左边界款式
border-left-width(en)	左边界宽度
border-radius(en)	边界圆弧半径
border-right(en)	右边界
border-right-color(en)	右边界颜色
border-right-style(en)	右边界款式
border-right-width(en)	右边界宽度
border-style(en)	边界款式
border-top(en)	顶边界
border-top-color(en)	顶边界颜色
border-top-left-radius(en)	左上边框圆弧半径
border-top-right-radius(en)	右上边框圆弧半径
border-top-style(en)	顶边界款式
border-top-width(en)	顶边界宽度
border-width(en)	边界宽度
box-shadow(en)	方形阴影
brightness(en)	亮度
clip(en)	裁剪
color(en)	颜色
context-menu-arrow-position(en)
context-menu-body-position(en)
context-menu-position(en)
contrast(en)	对比度
flow-children(en)	子元素自动排列
font(en)	字体
font-family(en)	字体系列
font-size(en)	字体大小
font-stretch(en)
font-style(en)
font-weight(en)	字体粗细
height(en)	高度
horizontal-align(en)	水平对齐
hue-rotation(en)	色相旋转
ignore-parent-flow(en)
img-shadow(en)
layout-position(en)
letter-spacing(en)	字符间距
line-height(en)	行高
margin(en)	外边框
margin-bottom(en)
margin-left(en)
margin-right(en)
margin-top(en)
max-height(en)	最大高度
max-width(en)	最大宽度
min-height(en)	最小高度
min-width(en)	最小宽度
opacity(en)	透明度
opacity-brush(en)
opacity-mask(en)
opacity-mask-scroll-down(en)
opacity-mask-scroll-up(en)
opacity-mask-scroll-up-down(en)
overflow(en)	溢出裁切
padding(en)
padding-bottom(en)
padding-left(en)
padding-right(en)
padding-top(en)
perspective(en)	透视
perspective-origin(en)	透视原点
position(en)	位置
pre-transform-rotate2d(en)	2D预旋转形变
pre-transform-scale2d(en)	3D比例形变
saturation(en)	饱和度
sound(en)	音效
sound-out(en)
text-align(en)	文本对齐
text-decoration(en)
text-decoration-style(en)
text-overflow(en)	文本截断
text-shadow(en)
text-transform(en)
texture-sampling(en)
tooltip-arrow-position(en)	提示器箭头位置
tooltip-body-position(en)	提示器会话框位置
tooltip-position(en)	提示器位置
transform(en)
transform-origin(en)
transition(en)
transition-delay(en)
transition-duration(en)
transition-high-framerate(en)
transition-property(en)
transition-timing-function(en)
ui-scale(en)
ui-scale-x(en)
ui-scale-y(en)
ui-scale-z(en)
vertical-align(en)	垂直对齐
visibility(en)	可见性
wash-color(en)
white-space(en)
width(en)	宽度
world-blur(en)
x(en)
y(en)
z(en)
z-index(en)

属性详细说明

Exported 09/21/2021 using "dump_panorama_css_properties" by 西索酱。祝大家中秋节快乐！

-s2-mix-blend-mode

这个功能用来控制板的混合模式。请参见网页上的CSS mix-blend-mode文档，但注意这里的normal模式是带有alpha（透明度）的混合的。

几个例子:

-s2-mix-blend-mode: normal;
-s2-mix-blend-mode: multiply;
-s2-mix-blend-mode: screen;

align

animation

animation-delay

animation-direction

animation-duration

animation-fill-mode

animation-iteration-count

animation-name

animation-timing-function

background-blur

将板的背景背景设置为填充颜色/渐变/结合。

几个例子:

background-color: #FFFFFFFF;
background-color: gradient( linear, 0% 0%, 0% 100%, from( #fbfbfbff ), to( #c0c0c0c0 ) );
background-color: gradient( linear, 0% 0%, 0% 100%, from( #fbfbfbff ), color-stop( 0.3, #ebebebff ), to( #c0c0c0c0 ) );
background-color: gradient( radial, 50% 50%, 0% 0%, 80% 80%, from( #00ff00ff ), to( #0000ffff ) );
background-color: #0d1c22ff, gradient( radial, 100% -0%, 100px -40px, 320% 270%, from( #3a464bff ), color-stop( 0.23, #0d1c22ff ), to( #0d1c22ff ) );

background-color-opacity

设置面板的背景颜色不透明度（它自己什么都不做，但是当与完整的背景颜色合并时，它会覆盖不透明度）。

Examples:

background-color-opacity: 0.5;

background-image

用来在背景中插入图片和视频，图片/视频需用逗号在列表中隔开。也可以添加一个“none”层来表示不添加背景图层。这个功能需要规定背景位置，背景大小和背景重复值。

几个例子:

background-image: url("file://{images}/default.tga"), url( "file://{movies}/Background1080p.webm" );

background-img-opacity

设置背景图像的不透明度

Examples:

background-img-opacity: 0.5;

background-position

控制背景图片的水平/竖直位置。格式如下: <left|center|right> <horizontal length> <top|center|bottom> <vertical length>

如果长度是百分比，它表示图片上位于这个比例的点将和板（也就是背景）上位于这个比例的点对齐。如果长度是像素，则表示向两个方向各移动一定距离（默认状态应该是左上角对齐，百科中描述不明确，各位实际操作中一试便知）。更多细节请看例子。

如果只明确了一个值，第二个值将默认被认为是center；如果明确了两个值，第一个必须是水平方向上的，第二哥必须是竖直方向上的。

几个例子:

// 将图片左上角与背景左上角对齐（默认情况）。
background-position: 0% 0%;

// 中心对齐 (相当于 "center center")
background-position: center;

// 将图片右下角和背景右下角对齐（相当于"100% 100%"）
background-position: right bottom;

// 将图片左上角对齐至背景左上角右边10像素，下方40像素的点上。
background-position: left 10px top 40px;

background-repeat

控制背景是否应在水平和垂直方向重复。

每个方向的可能值：
"repeat"-（默认）在指定方向重复，直到填满面板
"space" - 根据需要重复多次以填充没有被剪裁的面板。在图像之间添加空间以将第一张和最后一张图像与面板边缘对齐。
"round" - 根据需要重复多次以填充没有被剪裁的面板。调整图像大小以将第一张和最后一张图像与面板边缘对齐。
"no-repeat" - 没有重复

可能的单一值:
"repeat-x" - 等于 "repeat no-repeat"
"repeat-y" - 等于 "no-repeat repeat"

示例:

background-repeat: repeat; // 等于 "repeat repeat" (default)
background-repeat: repeat space; // repeats horizontally, spaces vertically 
background-repeat: no-repeat round; // 1 column of images, scaled to fit evenly

background-size

设置背景图水平和垂直方向上的尺寸。可以设置以像素或百分比为单位。设定为"contains"来设定为板的尺寸，或者设定为 "auto"来保持图片原有比例。默认设定为auto并保留原图尺寸。

如果要使用多个背景图层，需要在列表中用逗号隔开多个图片，并写明背景图/背景位置/背景重复值。

几个例子:

background-size: auto; // 同 "auto auto" (default) 
background-size: 100% 100%; // 图片覆盖整个板
background-size: 50% 75%; // 图片覆盖板的50%宽度和75%高度。
background-size: 300px 200px; // 背景被设置为300像素宽，200像素长

blur

这个功能用来设置组合时应用到板（及其子板）上的模糊特效的数量。默认效果是无模糊的。目前高斯模糊是唯一可用的模糊类型，带有三个参数:水平标准差，垂直标准差，和PASS数量。好的标准差值在大约在0-10，如果10依然不能满足需要，可以尝试增加PASS数。但是一个以上的PASS数量是不利于优化的。如果要间歇的话，可以只规定一个参数，水平和垂直的标准差都会被设置为这个参数，PASS数则被设置为1。

几个例子:

blur: gaussian( 2.5 );
blur: gaussian( 6, 6, 1 );

border

该功能用于简便地设置板的边界，规定边框的宽度，款式，和颜色。受支持的款式有[实心]和[无]。

例子:

border: 2px solid #111111FF;

border-bottom

用于设置板的底边界，规定边框的宽度，款式，和颜色。受支持的款式有[实心]和[无]。

例子:

border-bottom: 2px solid #111111FF;

border-bottom-color

设定底边的边框颜色。

例子:

border-bottom-color: #111111FF;

border-bottom-left-radius

设定边框左下角圆弧的半径，背景和前景会被裁剪以贴合边框。这里可以填写一个或两个数值，单位可以是像素（px）或百分比，第一个数值是椭圆（圆弧来自于椭圆）的水平半径，第二个是椭圆的垂直半径。如果填写一个数值的话，那么两个半径将共用这个数值，当然圆弧不再来自椭圆而是正圆。

例子:

border-bottom-left-radius: 2px 2px;
border-bottom-left-radius: 5%;

border-bottom-right-radius

设定边框右下角圆弧的半径，背景和前景会被裁剪以贴合边框。这里可以填写一个或两个数值，单位可以是像素（px）或百分比，第一个数值是椭圆（圆弧来自于椭圆）的水平半径，第二个是椭圆的垂直半径。如果填写一个数值的话，那么两个半径将共用这个数值，当然圆弧不再来自椭圆而是正圆。

例子:

border-bottom-right-radius: 2px 2px;
border-bottom-right-radius: 5%;

border-bottom-style

设定板的底边界款式。

例子:

border-bottom-style: solid;

border-bottom-width

设定板的底边界宽度。

例子:

border-bottom-width: 2px;

border-brush

实验性：为整个边框绘制区域设置更复杂的画笔（忽略正常边框颜色）。

示例:

border-brush: gradient( linear, 0% 0%, 0% 100%, from( #fbfbfbff ), to( #c0c0c0c0 ) );
border-brush: gradient( linear, 0% 0%, 0% 100%, from( #fbfbfbff ), color-stop( 0.3, #ebebebff ), to( #c0c0c0c0 ) );
border-brush: gradient( radial, 50% 50%, 0% 0%, 80% 80%, from( #00ff00ff ), to( #0000ffff ) );

border-color

设定边界的颜色。填写一个颜色值时，四边都会应用这一种颜色。填写两个颜色值时，顶边和底边将会应用第一种颜色，左边和右边应用第二种颜色。填写四个颜色值时，会按照“上右下左”的顺序依次应用。

例子：

border-color: #111111FF;
border-color: #FF0000FF #00FF00FF #0000FFFF #00FFFFFF;

border-left

用于设置板的左边界，规定边框的宽度，款式，和颜色。受支持的款式有[实心]和[无]。

例子:

border-left: 2px solid #111111FF;

border-left-color

设定左边的边框颜色。

例子:

border-left-color: #111111FF;

border-left-style

设定左边的边框颜色。

例子:

border-left-style: solid;

border-left-width

设定板的左边界宽度。

例子:

border-left-width: 2px;

border-radius

一次性设定所有的圆弧半径。和前面的圆弧设定一样，板的边缘将会被裁剪。简写的话，可以只写一个值，格式为水平半径/垂直半径，用“/”符号分开。你也可以写四个这样的值，以像素（px）或百分比。值的应用顺序是“左上、右上、右下、左下”。

例子:

// 2 px circular corners on all sides
border-radius: 2px;
// Perfect circular or elliptical panel (circular if box was square)
border-radius: 50% / 50%;
// 2 px horizontal radii 4px vertical elliptical corners on all sides
border-radius: 2px / 4px;
// All corners fully specified 
border-radius: 2px 3px 4px 2px / 2px 3px 3px 2px;

border-right

用于设置板的右边界，规定边框的宽度，款式，和颜色。受支持的款式有[实心]和[无]。

例子:

border-right: 2px solid #111111FF;

border-right-color

设定右边的边框颜色。

例子:

border-right-color: #111111FF;

border-right-style

设定右边的边框颜色。

例子:

border-right-style: solid;

border-right-width

设定板的右边界宽度。

例子:

border-right-width: 2px;

border-style

设定板的边界款式。如果填写一个值，它将被应用到四条边上，如果填写两个值，那么上/下边会应用第一个值，左/右边会应用第二个值。如果填写四个值，那么应用顺序是“上右下左”。br>
例子:

border-style: solid;
border-style: solid none solid none;

border-top

用于设置板的顶边界，规定边框的宽度，款式，和颜色。受支持的款式有[实心]和[无]。

例子:

border-top: 2px solid #111111FF;

border-top-color

设定顶边的边框颜色。

例子:

border-top-color: #111111FF;

border-top-left-radius

设定边框左上角圆弧的半径，背景和前景会被裁剪以贴合边框。这里可以填写一个或两个数值，单位可以是像素（px）或百分比，第一个数值是椭圆（圆弧来自于椭圆）的水平半径，第二个是椭圆的垂直半径。如果填写一个数值的话，那么两个半径将共用这个数值，当然圆弧不再来自椭圆而是正圆。

例子:

border-top-left-radius: 2px 2px;
border-top-left-radius: 5%;

border-top-right-radius

设定边框右上角圆弧的半径，背景和前景会被裁剪以贴合边框。这里可以填写一个或两个数值，单位可以是像素（px）或百分比，第一个数值是椭圆（圆弧来自于椭圆）的水平半径，第二个是椭圆的垂直半径。如果填写一个数值的话，那么两个半径将共用这个数值，当然圆弧不再来自椭圆而是正圆。

Examples:

border-top-right-radius: 2px 2px;
border-top-right-radius: 5%;

border-top-style

设定顶边的边框颜色。

例子:

border-top-style: solid;

border-top-width

设定板的顶边界宽度。

例子:

border-top-width: 2px;

border-width

设定板的边界宽度。如果填写一个值，它将被应用到四条边上，如果填写两个值，那么上/下边会应用第一个值，左/右边会应用第二个值。如果填写四个值，那么应用顺序是“上右下左”

例子:

border-width: 1px;'
border-width: 20px 1px 20px 1px;

box-shadow

设定方形区域的外阴影或内阴影/发光。阴影形状和板的边界形状是一样的，所以设置的时候请设定成与边界一样的弧度。填写时的变量顺序是：（选填）“inset（插入）”/“fill（填满）”、颜色、水平距离、垂直距离、模糊半径、像素分散距离。选择Inset时，效果是内阴影/发光。Fill只在能用于外阴影，阴影会垫在方形区域下方。

例子:

box-shadow: #ffffff80 4px 4px 8px 0px; // outer
box-shadow: fill #ffffff80 4px 4px 8px 0px; // outer, filled
box-shadow: inset #333333b0 0px 0px 8px 12px; // inner

brightness

在合成时设置板及其所有子板的亮度。这里采用的是HSB模式中的亮度系数。

例子:

brightness: 1.5;

clip

在板内设定一个裁剪区域，这部分的内容在渲染时会被裁剪掉。裁剪动作不会改变板的布局设置，是一个非常快捷的功能，并且支持变换/动画效果。

例子:

clip: rect( 10%, 90%, 90%, 10% );

color

设置板的前景填充/渐变/混合色。这个颜色将会用来渲染板内文本。

例子:

color: #FFFFFFFF;
color: gradient( linear, 0% 0%, 0% 100%, from( #cbcbcbff ), to( #a0a0a0a0 ) );

context-menu-arrow-position

Specifies where to point the arrow of a context menu at on this panel. The first value controls how the arrow is positioned horizontally when the context menu is to the top or bottom of the panel, and the second value controls how the arrow is positioned vertically when the context menu is to the left or right of the panel. Default is '50% 50%'.

例子:

context-menu-arrow-position: 25% 50%;

context-menu-body-position

Specifies where to position the body of a context menu relative to this panel. The first value controls how the body is aligned horizontally when the context menu is to the top or bottom of the panel, and the second value controls how the body is aligned vertically when the context menu is to the left or right of the panel. 0% means left/top aligned, 50% means center/middle aligned, and 100% means right/bottom aligned. Default is '0% 0%'.

例子:

context-menu-body-position: 50% 100%;

context-menu-position

Specifies where to position a context menu relative to this panel. Valid options include 'left', 'top', 'right', and 'bottom'. List up to 4 positions to determine the order that positions are tried if the context menu doesn't fully fit on screen. Default is 'right left bottom top'. If less than 4 positions are specified, the context menu first tries the opposite of the specified position along the same axis before switching to the other axis.

Examples:

context-menu-position: bottom;
context-menu-position: left bottom;

contrast

在合成时设置该板及其所有子板的对比度。

例子:

contrast: 1.5;

flow-children

<内容暂缺>

font

<内容暂缺>

font-family

设定将要使用的字体。

例子:

font-family: Arial;
font-family: "Comic Sans MS";

font-size

设置字体的高度，以像素为单位。

例子:

font-size: 12;

font-stretch

指定要使用的字体拉伸。支持的值为 normal、condens 和 expand。

示例:

font-stretch: normal;
font-stretch: condensed;
font-stretch: expanded;

font-style

设定字体的款式。受支持的款式有：normal（正常）、italic（斜体）。

例子:

font-style: normal;

font-weight

设定字体的粗细。受支持的值有light, thin, normal, medium, bold, 和 black（这几个值从细到粗递增）。

例子:

font-weight: normal;
font-weight: bold;
font-weight: thin;

height

设定板的高度。可选用的值如下:
"fit-children" - 板的尺寸被设定为所有子板的要求尺寸（默认情况）。
<pixels> - 任何固定的像素值。 (例: "100px")
<percentage> - 高度的百分比。 (例: "100%")
"fill-parent-flow( <weight> )" - 与父板的宽度对齐。如果多个子板被设定使用这个值，那么高度会被按照加权“分配”，比如三个板被设定为fill-parent-flow( 1.0 )，并且它们的父板是300像素高，那么每个子板最终会是100像素高（括号里的即为加权数）。(例: "fill-parent-flow( 1.0 )" )
"width-percentage( <percentage> )" - 将高设定为宽的百分比，这样就可以实现固定比例。但是宽的设定不能同时为高的百分比。

horizontal-align

<内容暂缺>

hue-rotation

在组合时，设定板及其子板的色相旋转。默认情况为0.0，既无变化。值域采用角度制。

Sets the hue rotation to apply to the panel and all it's children during composition. Default of 0.0 means no adjustment, domain is in degrees.

例子:

hue-rotation: 180deg;

ignore-parent-flow

img-shadow

指定图像阴影。阴影形状将匹配面板可以生成的图像，这仅对图像有意义。语法采用水平偏移像素、垂直偏移像素、模糊半径像素、强度，然后是阴影颜色。

例子:

img-shadow: 2px 2px 8px 3.0 #333333b0;

layout-position

设置面板相对于其父级的定位方式。"static" 表示以默认方式定位。 "fixed" 表示以默认方式定位，但忽略父级的滚动偏移。

例子:

layout-position: fixed;

letter-spacing

设置字符串中文本的间距。可用值有：
normal - 不手动改变间距
<pixels> - 任何以像素为单位的值 (例: "1px")

line-height

设置行高（一行字上界到下界的距离）。默认情况下，这个设置是没有被启用的，实际的行高会自动匹配字体大小。

例子:

line-height: 20px;

margin

<内容暂缺>

margin-bottom

<内容暂缺>

margin-left

<内容暂缺>

margin-right

<内容暂缺>

margin-top

<内容暂缺>

max-height

<内容暂缺>

max-width

<内容暂缺>

min-height

<内容暂缺>

min-width

<内容暂缺>

opacity

设置在合成过程中应用于面板及其所有子项的不透明度或透明度。默认值 1.0 表示完全不透明，0.0 表示完全透明。

例子:

opacity: 0.8;

opacity-brush

设置一个不透明画笔以在合成过程中应用于面板及其所有子项。

例子:

opacity-brush: gradient( linear, 0% 0%, 0% 100%, from( #ffffffff ), to( #ffffff00 ) );

opacity-mask

将图像作为不透明蒙版应用，该蒙版可拉伸到面板边界并根据 Alpha 通道淡出其内容。第二个浮点值是遮罩本身的可选不透明度值，图像不会插值/淡入淡出，但您可以动画不透明度以淡入/淡出遮罩。 -scroll-up、-scroll-down 和 -scroll-up-down 变量覆盖了掩码，并且仅在各种垂直滚动场景基于溢出属性影响面板时应用。

示例:

opacity-mask: url( "file://{images}/upper_row_mask.tga" );
opacity-mask: url( "file://{images}/upper_row_mask.tga" ) 0.5;
opacity-mask-scroll-up: url( "file://{images}/upper_row_mask_up.tga" ) 0.5;
opacity-mask-scroll-down: url( "file://{images}/upper_row_mask_down.tga" ) 0.5;
opacity-mask-scroll-up-down: url( "file://{images}/upper_row_mask_up_down.tga" ) 0.5;

opacity-mask-scroll-down

opacity-mask-scroll-up

opacity-mask-scroll-up-down

overflow

指定如何处理溢出面板可用空间的内容。可能的值：
“squish” - 如果需要，子项被压扁以适应面板的边界（默认）
“clip” - 子项保持他们想要的大小，但他们的内容被剪裁
“scroll” - 子项保持他们所需的大小和滚动条被添加到此面板

“noclip” - 孩子们保持他们想要的大小，并且允许内容溢出此面板

示例：< 预>溢出：挤压挤压； // 在水平和垂直方向挤压内容

overflow: squish scroll; // scrolls contents in the Y direction

padding

<内容暂缺>

padding-bottom

<内容暂缺>

padding-left

<内容暂缺>

padding-right

<内容暂缺>

padding-top

<内容暂缺>

perspective

为板的子板设置透视深度。默认深度为1000，表示摄像机到元素的距离为1000像素。

例子:

perspective: 1000;

perspective-origin

设置子板发生透视形变时的“原点”，既摄像机相对于板的X/Y坐标。

例子:

perspective-origin: 50% 50%;

position

设置板的X/Y/Z坐标。在流动布局中不可用。

例子:

position: 3% 20px 0px;

pre-transform-rotate2d

在3D形变发生之前，设置该板在2D平面上的旋转量。旋转中心为板先前的中心，且旋转时不发生透视。

透视:

pre-transform-rotate2d: 45deg;

pre-transform-scale2d

在3D形变发生之前，设置该板在2D平面上的XY方向比例。板的中心不改变，且不发生透视。默认值为1.0 ，表示没有缩放，0.5则表示缩放至原先的一半大小。

例子:

pre-transform-scale2d: 0.8
pre-transform-scale2d: 0.4, 0.6

saturation

设置板及其所有子板的饱和度。1.0表示不做任何调整，0.0表示完全不饱和（即灰度），1.0以上表示过饱和。

例子:

saturation: 0.4;

sound

设定一个音效，当选择器被触发的时候播放。

例子:

sound: "whoosh_in";

sound-out

Specifies a sound name to play when this selector is removed.

例子:

sound-out: "whoosh_out";

text-align

Specifies the text alignment for text within this panel, defaults to left.

Examples:

text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: justify-letter-spacing;

text-decoration

指定此面板中文本的装饰，默认为无。可能的值：无、下划线、横线。

例子:

text-decoration: underline;

text-decoration-style

指定此面板中文本的装饰样式，默认为无。可能的值：无、虚线、虚线、波浪线。

例子:

text-decoration-style: dotted;

text-overflow

控制不适合面板的文本截断。“clip”意味着简单地截断（在字符边界上），“ellipsis”意味着以“...”结尾。, "shrink" 表示减小字体大小以适应。 “noclip”允许文本基于“溢出”样式溢出。

我们默认使用省略号，这与普通的 CSS 规范相反。

示例:

text-overflow: ellipsis;
text-overflow: clip;
text-overflow: shrink;
text-overflow: noclip;

text-shadow

Specifies text shadows. The shadow shape will match the text the panel can generate,and this is only meaningful for labels. Syntax takes horizontal offset pixels, vertical offset pixels, blur radius pixels, strength, and then shadow color.

例子:

text-shadow: 2px 2px 8px 3.0 #333333b0;

text-transform

Specifies the transform for text within this panel, defaults to none. Possible values: none, uppercase, lowercase.

例子:

text-transform: uppercase;

texture-sampling

Controls texture sampling mode for the panel. Set to alpha-only to use the textures alpha data across all 3 color channels, or point for point sampling.

Examples:

texture-sampling: normal;
texture-sampling: alpha-only;
texture-sampling: point;

tooltip-arrow-position

Specifies where to point the arrow of a tooltip at on this panel. The first value controls how the arrow is positioned horizontally when the tooltip is to the top or bottom of the panel, and the second value controls how the arrow is positioned vertically when the tooltip is to the left or right of the panel. Default is '50% 50%'.

例子:

tooltip-arrow-position: 25% 50%;

tooltip-body-position

Specifies where to position the body of a tooltip relative to this panel. The first value controls how the body is aligned horizontally when the tooltip is to the top or bottom of the panel, and the second value controls how the body is aligned vertically when the tooltip is to the left or right of the panel. 0% means left/top aligned, 50% means center/middle aligned, and 100% means right/bottom aligned. Default is '0% 0%'.

例子:

tooltip-body-position: 50% 100%;

tooltip-position

Specifies where to position a tooltip relative to this panel. Valid options include 'left', 'top', 'right', and 'bottom'. List up to 4 positions to determine the order that positions are tried if the tooltip doesn't fully fit on screen. Default is 'right left bottom top'. If less than 4 positions are specified, the tooltip first tries the opposite of the specified position along the same axis before switching to the other axis.

Examples:

tooltip-position: bottom;
tooltip-position: left bottom;

transform

Sets the transforms to apply to the panel in 2d or 3d space. You can combine various transforms (comma separated) and they will be applied in order to create a 4x4 3d transform matrix. The possible operations are: translate3d( x, y, z ), translatex( x ), translatey( y ), translatez( z ), scale3d( x, y, z), rotate3d( x, y, z ), rotatex( x ), rotatey( y ), rotatez( z ).

Examples:

transform: translate3d( -100px, -100px, 0px );
transform: rotateZ( -32deg ) rotateX( 30deg ) translate3d( 125px, 520px, 230px );

transform-origin

Sets the transform origin about which transforms will be applied. Default is 50% 50% on the panel so a rotation/scale is centered.

例子:

transform-origin: 50% 50%

transition

Specifies which properties should transition smoothly to new values if a class/pseudo class changes the styles. Also specifies duration, timing function, and delay. Valid timing functions are: ease, ease-in, ease-out, ease-in-out, linear.

例子:

transition: position 2.0s ease-in-out 0.0s, perspective-origin 1.2s ease-in-out 0.8s;

transition-delay

Specifies the delay in seconds to use for transition properties on this panel, if more than one comma delimited value is specified then the values are applied to each property specified in 'transition-property' in order. If only one value is specified then it applies to all the properties specified in transition-property.

Examples:

transition-delay: 0.0s;
transition-delay: 0.0s, 1.2s;

transition-duration

Specifies the durating in seconds to use for transition properties on this panel, if more than one comma delimited value is specified then the values are applied to each property specified in 'transition-property' in order. If only one value is specified then it applies to all the properties specified in transition-property.

Examples:

transition-duration: 2.0s;
transition-duration: 2.0s, 1.2s, 1.2s, 4.0s, 2.0s;

transition-high-framerate

Specifies the desire for higher framerate during this transition, if we have control.

Examples:

transition-high-framerate: true;
transition-high-framerate: false, true, false;

transition-property

Specifies which properties should transition smoothly to new values if a class/pseudo class changes the styles.

Examples:

transition: position, transform, background-color;

transition-timing-function

Specifies the timing function to use for transition properties on this panel, if more than one comma delimited value is specified then the values are applied to each property specified in 'transition-property' in order. If only one value is specified then it applies to all the properties specified in transition-property. Valid timing functions are: ease, ease-in, ease-out, ease-in-out, linear.

Examples:

transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out, linear;
transition-timing-function: cubic-bezier( 0.785, 0.385, 0.555, 1.505 );

ui-scale

Specifies a scale to apply to this panel's layout and all descendants. This scale happens at the layout level ratherthan the bitmap level, so things like text will increase their font size rather than just bitmap scaling.

Examples:

ui-scale: 150%; // 150% scaling for X, Y, and Z.
ui-scale: 50% 100% 150%; // 50% scaling for X, 100% for Y. 150% for Z.

ui-scale-x

Specifies a scale to apply to this panel's layout and all descendants. This scale happens at the layout level ratherthan the bitmap level, so things like text will increase their font size rather than just bitmap scaling.

Examples:

ui-scale: 150%; // 150% scaling for X, Y, and Z.
ui-scale: 50% 100% 150%; // 50% scaling for X, 100% for Y. 150% for Z.

ui-scale-y

Specifies a scale to apply to this panel's layout and all descendants. This scale happens at the layout level ratherthan the bitmap level, so things like text will increase their font size rather than just bitmap scaling.

Examples:

ui-scale: 150%; // 150% scaling for X, Y, and Z.
ui-scale: 50% 100% 150%; // 50% scaling for X, 100% for Y. 150% for Z.

ui-scale-z

Specifies a scale to apply to this panel's layout and all descendants. This scale happens at the layout level ratherthan the bitmap level, so things like text will increase their font size rather than just bitmap scaling.

Examples:

ui-scale: 150%; // 150% scaling for X, Y, and Z.
ui-scale: 50% 100% 150%; // 50% scaling for X, 100% for Y. 150% for Z.

vertical-align

<内容暂缺>

visibility

Controls if the panel is visible and is included in panel layout. Possible values:
"visible" - panel is visible and included in layout (default)
"collapse" - panel is invisible and not included in layout

wash-color

Specifies a 'wash' color, which means a color that will be blended over the panel and all it's children at composition time, tinting them. The alpha value of the color determines the intensity of the tinting.

例子:

wash-color: #39b0d325;

white-space

Controls white-space wrapping on rendered text. "normal" means wrap on whitespace, "nowrap" means do no wrapping at all.

Examples:

white-space: normal;
white-space: nowrap;

width

Sets the width for this panel. Possible values:
"fit-children" - Panel size is set to the required size of all children (default)
<pixels> - Any fixed pixel value (ex: "100px")
<percentage> - Percentage of parent width (ex: "100%")
"fill-parent-flow( <weight> )" - Fills to remaining parent width. If multiple children are set to this value, weight is used to determine final width. For example, if three children are set to fill-parent-flow of 1.0 and the parent is 300px wide, each child will be 100px wide. (ex: "fill-parent-flow( 1.0 )" )
"height-percentage( <percentage> )" - Percentage of the panel's height, which allows you to enforce a particular aspect ratio. The height cannot also be width-percentage.

world-blur

Sets the amount of blur to apply to the world / backbuffer before drawing.

Examples:

world-blur: gaussian( 2.5 );
world-blur: gaussian( 6, 6, 1 );world-blur: mipmapgaussian( 6, 6, 4 );  In this version each gaussian pass is preceded by a quarter area downsample.

x

设置面板的 x、y、z 位置。不得处于流动布局中。

例子:

position: 3% 20px 0px;

y

设置面板的 x、y、z 位置。不得处于流动布局中。

例子:

position: 3% 20px 0px;

z

设置面板的 x、y、z 位置。不得处于流动布局中。

例子:

position: 3% 20px 0px;

z-index

设置面板的 z-index，面板将在父面板中按顺序排序和绘制。排序首先按从位置和变换计算出的 z-pos 进行排序，然后如果面板具有匹配的 zpos，则使用 zindex。 z-index 与 z-pos 的不同之处在于它不影响渲染透视图，只影响绘制/命中测试顺序。默认 z-index 值为 0，并且接受任何浮点值。

示例：

z-index: 1;

Panorama 样式属性

Contents

受支持的伪类选择器

属性列表

属性详细说明

-s2-mix-blend-mode

align

animation

animation-delay

animation-direction

animation-duration

animation-fill-mode

animation-iteration-count

animation-name

animation-timing-function

background-blur

background-color-opacity

background-image

background-img-opacity

background-position

background-repeat

background-size

blur

border

border-bottom

border-bottom-color

border-bottom-left-radius

border-bottom-right-radius

border-bottom-style

border-bottom-width

border-brush

border-color

border-left

border-left-color

border-left-style

border-left-width

border-radius

border-right

border-right-color

border-right-style

border-right-width

border-style

border-top

border-top-color

border-top-left-radius

border-top-right-radius

border-top-style

border-top-width

border-width

box-shadow

brightness

clip

color

context-menu-arrow-position

context-menu-body-position

context-menu-position

contrast

flow-children

font

font-family

font-size

font-stretch

font-style

font-weight

height

horizontal-align

hue-rotation

ignore-parent-flow

img-shadow

layout-position

letter-spacing

line-height

margin

margin-bottom

margin-left

margin-right

margin-top

max-height

max-width

min-height