本主题列出了支持的 USS 属性及其接受的值。
USS 数据类型定义 USS 属性接受的值和关键字。
属性 | 描述 |
---|---|
<length> |
表示距离值。 |
<number> |
表示整数或带小数的数字。 |
<integer> |
表示整数。 |
<color> |
表示颜色。可使用 #hexadecimal 代码、rgb() 或 rgba() 函数或颜色关键字(例如 blue 或 transparent )来定义颜色。 |
<resource> |
表示 Resources 文件夹中的资源。 |
<url> |
表示通过路径指定的资源。可将路径表示为相对路径或绝对路径。 |
UI 工具包样式属性使用与 W3C CSS 文档相同的语法句法:
auto
、baseline
。<
和 >
)之间。例如:<length>
、<color>
。<'
和 '>
)之间。例如:<'width'>
。如果属性值包含多个组件:
|
) separates two or more alternatives: exactly one must occur.||
) separates two or more options: one or more must occur, in any order.&&
) 分隔两个或多个组件:全部都必须出现,顺序任意。[
]
) 表示分组。每个类型、关键字或尖括号组的后面都可以跟修饰符:
*
) 表示前面的类型、词或组出现零次或多次。+
) 表示前面的类型、词或组出现一次或多次。?
) 表示前面的类型、词或组是可选的。{A,B}
) 表示前面的类型、词或组出现至少 A
次且最多 B
次。如果没有为继承的属性指定任何值,该元素将从其父元素获取值。例如,使用继承的属性来设置所有元素的字体。
css
:root {
-unity-font: resource("Font/consola.ttf");
}
继承的属性如下:
width: <length> | auto
height: <length> | auto
min-width: <length> | auto
min-height: <length> | auto
max-width: <length> | none
max-height: <length> | none
width
和 height
指定元素的大小。如果未指定 width
,则宽度基于元素内容的宽度。如果未指定 height
,则高度基于元素内容的高度。
margin-left: <length> | auto;
margin-top: <length> | auto
margin-right: <length> | auto
margin-bottom: <length> | auto
margin: [<length> | auto]{1,4}
margin
简便选项的应用方式如下:
选项 | 描述 |
---|---|
1 个长度 | 应用于所有四个边距。 |
2 个长度 | 第一个应用于 margin-top 和 margin-bottom 。第二个应用于 margin-left 和 margin-right 。 |
3 个长度 | 第一个应用于 margin-top 。第二个应用于 margin-left 和 margin-right 。第三个应用于 margin-bottom 。 |
4 个长度 | 按此顺序应用长度:margin-top 、margin-right 、margin-bottom 、margin-left
|
border-left-width: <length>
border-top-width: <length>
border-right-width: <length>
border-bottom-width: <length>
border-width: <length>{1,4}
border-width
简便选项的应用方式如下:
选项 | 描述 |
---|---|
1 个长度 | 应用于所有四个边框宽度。 |
2 个长度 | 第一个应用于 border-top-width 和 border-bottom-width 。第二个应用于 border-left-width 和 border-right-width 。 |
3 个长度 | 第一个应用于 border-top-width 。第二个应用于 border-left-width 和 border-right-width 。第三个应用于 border-bottom-width 。 |
4 个长度 | 按此顺序应用长度:border-top-width 、border-right-width 、border-bottom-width 、border-left-width
|
padding-left: <length>
padding-top: <length>
padding-right: <length>
padding-bottom: <length>
padding: <length>{1,4}
padding
简便选项的应用方式如下:
选项 | 描述 |
---|---|
1 个长度 | 应用于所有四个填充。 |
2 个长度 | 第一个应用于 padding-top 和 padding-bottom 。第二个应用于 padding-left 和 padding-right 。 |
3 个长度 | 第一个应用于 padding-top 。第二个应用于 padding-left 和 padding-right 。第三个应用于 padding-bottom 。 |
4 个长度 | 按此顺序应用长度:padding-top 、padding-right 、padding-bottom 、padding-left
|
此部分列出了用于定位视觉元素的属性。UI 工具包包括一个布局引擎,可根据布局和样式属性定位视觉元素。该布局引擎实现一个名为 Flexbox 的 HTML/CSS 布局系统的子集。
默认情况下,所有项都垂直放置在其容器中。
flex-grow: <number>
flex-shrink: <number>
flex-basis: <length> | auto
flex: none | [ <'flex-grow'> <'flex-shrink'>?|| <'flex-basis'> ]
align-self: auto | flex-start | flex-end | center | stretch
flex-direction: row | row-reverse | column | column-reverse
flex-wrap: nowrap | wrap | wrap-reverse
align-content: flex-start | flex-end | center | stretch
align-items: flex-start | flex-end | center | stretch
justify-content: flex-start | flex-end | center | space-between | space-around
position: absolute | relative
默认情况下,此属性设置为 relative
:根据父级来定位元素。如果此属性设置为 absolute
,则元素将保留其父级布局,并根据父级边界指定值。
left: <length> | auto
top: <length> | auto
right: <length> | auto
bottom: <length> | auto
相对于元素父级边缘或原始位置的距离。
绘制属性用于设置视觉元素的背景、边框和外观。
background-color: <color>
background-image: <resource> | <url> | none
-unity-background-scale-mode: stretch-to-fill | scale-and-crop | scale-to-fit
-unity-background-image-tint-color: <color>
分配背景图像时,可以根据简化的九宫格规范来绘制该图像:
-unity-slice-left: <integer>
-unity-slice-top: <integer>
-unity-slice-right: <integer>
-unity-slice-bottom: <integer>
border-color: <color>
border-top-left-radius: <length>
border-top-right-radius: <length>
border-bottom-left-radius: <length>
border-bottom-right-radius: <length>
border-radius: <length>{1,4}
border-radius
简便选项的应用方式如下:
选项 | 描述 |
---|---|
1 个长度 | 应用于所有四个边框半径属性。 |
2 个长度 | 第一个应用于 border-top-left-radius 和 border-bottom-right-radius 。第二个应用于 border-bottom-left-radius 和 border-top-right-radius
|
3 个长度 | 第一个应用于 border-top-left-radius 。第二个应用于 border-bottom-left-radius 和 border-top-right-radius 。第三个应用于 border-bottom-right-radius 。 |
4 个长度 | 按此顺序应用长度:border-top-left-radius 、border-top-right-radius 、border-bottom-right-radius 、border-bottom-left-radius
|
overflow: hidden | visible
-unity-overflow-clip-box: padding-box | content-box
opacity: <number>
visibility: visible | hidden
display: flex | none
display
默认值为 flex
。将 display
设置为 none
将删除此元素。将 visibility
设置为 hidden
将隐藏该元素,但是该元素仍会占用布局中的空间。
-unity-overflow-clip-box
定义元素内容的裁剪矩形。默认值为 padding-box
,表示位于填充区域外部的矩形(上文的框形模型图像中的绿色矩形);content-box
表示位于填充区域内的值(上文的框形模型图像中的蓝色矩形)。
文本属性用于设置颜色、字体、字体大小以及 Unity 特有属性(字体资源、字形、对齐、自动换行和剪切)。
color: <color>
-unity-font: <resource> | <url>
font-size: <number>
-unity-font-style: normal | italic | bold | bold-and-italic
-unity-text-align: upper-left | middle-left | lower-left | upper-center | middle-center | lower-center | upper-right | middle-right | lower-right
white-space: normal | nowrap
使用 cursor
默认纹理类型可为光标导入自定义纹理。
cursor: [ [ <resource> | <url> ] [ <integer> <integer>]?, ] [ arrow | text | resize-vertical | resize-horizontal | link | slide-arrow | resize-up-right | resize-up-left | move-arrow | rotate-arrow | scale-arrow | arrow-plus | arrow-minus | pan | orbit | zoom | fps | split-resize-up-down | split-resize-left-right ]
Did you find this page useful? Please give it a rating:
Thanks for rating this page!
What kind of problem would you like to report?
Thanks for letting us know! This page has been marked for review based on your feedback.
If you have time, you can provide more information to help us fix the problem faster.
Provide more information
You've told us this page needs code samples. If you'd like to help us further, you could provide a code sample, or tell us about what kind of code sample you'd like to see:
You've told us there are code samples on this page which don't work. If you know how to fix it, or have something better we could use instead, please let us know:
You've told us there is information missing from this page. Please tell us more about what's missing:
You've told us there is incorrect information on this page. If you know what we should change to make it correct, please tell us:
You've told us this page has unclear or confusing information. Please tell us more about what you found unclear or confusing, or let us know how we could make it clearer:
You've told us there is a spelling or grammar error on this page. Please tell us what's wrong:
You've told us this page has a problem. Please tell us more about what's wrong:
Thank you for helping to make the Unity documentation better!
Your feedback has been submitted as a ticket for our documentation team to review.
We are not able to reply to every ticket submitted.