USS 共同属性
本页介绍常见的 USS 属性、它们的语法和接受的值，以及与 CSS 的区别。有关 USS 属性的完整列表，请参阅 USS 属性参考。
都
这all属性将所有属性重置为默认值。此属性不适用于自定义 USS 属性。
all: initial
盒子模型
尺寸
width: <length> | auto
height: <length> | auto
min-width: <length> | auto
min-height: <length> | auto
max-width: <length> | none
max-height: <length> | none
aspect-ratio: <ratio> | auto
这width和height指定元素的大小。如果width未指定，则宽度基于元素内容的宽度。如果height未指定，则高度基于元素内容的高度。
纵横比是元素的宽度与高度之比。您可以指定纵横比图像比例尺寸的关系，例如其宽度和高度。
请参阅术语表作为浮点数（例如，1.777778为16/9） 或将其设置为auto以保持原始纵横比。
当您在元素上设置其他大小调整属性时，例如width,height,min-width或max-height这aspect-ratio属性与这些属性一起工作。例如，如果您将height: 200px并应用3/4，图像的宽度变为150px以保持比例。如果显式将width和height，则这些值将覆盖纵横比。
为确保元素无论里面的内容如何都能保持比例，你可以将overflow自hidden.
注意：使用纵横比调整大小的元素在移动纵向设备尺寸上可能会有所不同，因为设备屏幕宽度可能与纵横比的比例高度不匹配。建议的最佳做法是调整断点上的比率值或其他大小设置，以实现所需的布局。例如，为较大的断点设置图像的宽屏宽高比，为移动断点设置同一图像的方形宽高比。
纵横比相当于aspect-ratioCSS 属性。有关详细信息，请参阅 MSDN 文档。
边缘
margin-left: <length> | auto;
margin-top: <length> | auto
margin-right: <length> | auto
margin-bottom: <length> | auto
/* Shorthand */
margin: [<length> | auto]{1,4}
边界
border-left-width: <length>
border-top-width: <length>
border-right-width: <length>
border-bottom-width: <length>
/* Shorthand */
border-width: <length>{1,4}
填充
padding-left: <length>
padding-top: <length>
padding-right: <length>
padding-bottom: <length>
/* Shorthand */
padding: <length>{1,4}
与 CSS 的区别
USS 使用的替代框模型与标准 CSS 框模型不同。在标准的 CSS 框模型中，width和height定义内容框的大小。元素的渲染大小是其padding,border-width和width / height值。
Unity 的模型相当于将 CSSbox-sizing属性设置为border-box.有关详细信息，请参阅 MDN 文档。
弹性布局
UI 工具包包括一个布局引擎，用于将视觉元素实例化或派生自 C# 的可视化树的节点VisualElement类。您可以设置外观样式、定义行为并将其作为 UI 的一部分显示在屏幕上。更多信息
请参阅术语表基于布局和样式属性。布局引擎实现了 Flexbox 的一个子集，这是一个 HTML/CSS 布局系统。
默认情况下，所有项目都垂直放置在其容器中。
/* Items */
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
/* Containers */
flex-direction: row | row-reverse | column | column-reverse
flex-wrap: nowrap | wrap | wrap-reverse
align-content: flex-start | flex-end | center | stretch
/* The default value is `stretch`.
`auto` sets `align-items` to `flex-end`. */
align-items: auto | flex-start | flex-end | center | stretch
justify-content: flex-start | flex-end | center | space-between | space-around
定位
/* The default value is `relative` which positions the element based on its parent.
If sets to `absolute`, the element leaves its parent layout and values are specified based on the parent bounds.*/
position: absolute | relative
/* The distance from the parent edge or the original position of the element. */
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>
有关设置背景图像的详细信息，请参阅设置背景图像。
切片
分配背景图像时，您可以根据简化的 9 切片规范绘制它：
-unity-slice-left: <integer>
-unity-slice-top: <integer>
-unity-slice-right: <integer>
-unity-slice-bottom: <integer>
-unity-slice-scale: <length>
-unity-slice-type: sliced | tiled
注意：对于精灵2D 图形对象。如果你习惯于在3D中工作，精灵本质上只是标准纹理，但有一些特殊的技术可以组合和管理精灵纹理，以提高开发过程中的效率和便利性。更多信息
请参阅术语表，Unity 会调整-unity-slice-scale由精灵的pixels-per-unit值与面板的reference sprite pixels per unit value，默认情况下是100.例如，如果精灵的pixels-per-unit是16，比例调整为16/100 = 0.16.因此，如果将比例设置为2px，最终尺度为2px * 0.16px = 0.32px.对于纹理和矢量图像，Unity 不会对您设置的切片比例值进行额外调整。
有关 9 切片的更多信息，请参阅使用 UI Toolkit 的 9 切片图像。
边框颜色
border-left-color: <color>
border-top-color: <color>
border-right-color: <color>
border-bottom-color: <color>
/* Shorthand */
border-color: <color>{1,4}
边界半径
border-top-left-radius: <length>
border-top-right-radius: <length>
border-bottom-left-radius: <length>
border-bottom-right-radius: <length>
/* Shorthand */
border-radius: <length>{1,4}
与 CSS 的区别
边框半径属性在 USS 和 CSS 中的工作方式几乎相同。有关border-radius，请参阅 MDN 文档。
但是，有两个主要区别：
- Unity 不支持秒半径简写 （
border-radius: (first radius values) / (second radius values);） 用于创建椭圆角。 - Unity 将边框半径值减少到元素大小的一半，以像素计算机图像中的最小单位。像素大小取决于您的屏幕分辨率。像素光照是在每个屏幕像素下计算的。更多信息
请参阅术语表.例如，对于 100px x 100px 元素，任何border-radius大于 50px 的值将减少到 50px。如果您对 border-radius 属性使用百分比 （） 值，Unity 首先将百分比解析为像素，然后将%border-radius值设置为已解析像素值的一半。如果两个或多个角的半径值不同，Unity 会将任何大于元素大小一半的值减少到元素大小的一半。
外观
overflow: hidden | visible
-unity-overflow-clip-box: padding-box | content-box
-unity-paragraph-spacing: <length>
visibility: visible | hidden
display: flex | none
这-unity-overflow-clip-box定义元素内容的剪切矩形。默认值为padding-box、填充区域外的矩形（上面方框模型图中的绿色矩形）;content-box表示填充区域内的值（上面框模型图像中的蓝色矩形）。
这display默认值为flex.设置display自none以从 UI 中删除元素。将visibility自hidden以隐藏元素，但该元素仍占用布局中的空间。
这overflow属性控制元素内容的剪辑。默认值为visible，这意味着元素的内容不会被剪切到元素的边界。如果您将overflow自hidden，则元素的内容被裁剪到元素的边界。您可以使用overflow以产生遮罩效果。
与 CSS 的区别
美国海军display属性仅支持 CSS 的一小部分display属性的可用关键字值。USS 版本支持与 Yoga 布局引擎配合使用的关键字。
- 有关 Yoga 的更多信息，请参阅 Yoga 的灵活布局。
- 有关 CSS 的更多信息
display属性，请参阅 MDN 文档。
文本属性
文本属性设置字体资源、字体样式、对齐方式、自动换行和剪切的颜色、字体、字体大小和特定于 Unity 的属性。
color: <color>
-unity-font: <resource> | <url>
-unity-font-definition: <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
-unity-text-overflow-position: start | middle | end
white-space: normal | nowrap | pre | pre-wrap
-unity-text-outline-width: <length>
-unity-text-outline-color: <color>
/* Shorthand */
-unity-text-outline: <length> | <color>
-unity-text-generator: standard | advanced
-unity-text-auto-size: none | best-fit <min-font-size> <max-font-size>
/* The text overflow mode. */
/* clip: Trims any text that extends beyond the boudaries of its container. */
/* ellipsis: Truncates any text that extends beyong the boudaries of its container with an ellipsis. */
text-overflow: clip | ellipsis
text-shadow: <x-offset> <y-offset> <blur-radius> <color>;
letter-spacing: <length>
word-spacing: <length>
-unity-paragraph-spacing: <length>
注意：当您在 UI Builder 中设置字体时，Font 控件中的检查器一个 Unity 窗口，显示有关当前选定游戏对象、资产或项目设置的信息，允许您检查和编辑值。更多信息
请参阅术语表集-unity-font，以及字体资源控件集-unity-font-definition.因为-unity-font-definition优先于-unity-font，要使用 字体（Font） 列表中的字体，请从 字体资源（Font Asset） 中选择 无（None）。否则，您选择的字体不会生效。
有关文本阴影和文本轮廓的更多信息，请参阅文本效果。
有关文本生成器和自动调整大小的更多信息，请参阅高级文本生成器。
光标
这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 ]
注意：光标关键字仅在编辑器UI中可用。光标关键字在运行时UI中不起作用。在运行时UI中，你必须将纹理用于自定义光标。
与 CSS 的区别
在 CSS 中，您可以在单个cursorstyle 声明。指定多个游标时，它们会形成一个回退链。如果浏览器无法加载第一个自定义光标，它会按顺序尝试其他每个光标，直到其中一个加载或不再有自定义光标可供尝试。如果浏览器无法加载任何自定义游标，则使用关键字。
在 USS 中，自定义光标和关键字是互斥的。一个cursorstyle 声明只能有一个自定义光标或一个关键字。
有关 CSS 的详细信息cursor属性，请参阅 MDN 文档。
不透明度
opacity: <number>
与 CSS 的区别
USS 不透明度类似于 CSS 不透明度。父元素的不透明度会影响子元素的感知不透明度。USS 不透明度和 CSS 不透明度之间的可感知性是不同的。
在下面的 USS 示例中，蓝色方块是红色方块的子方块。红色方块有一个opacity之0.5.
.red {
background-color: red;
opacity: 0.5;
}
.blue {
background-color: blue;
left: 20px;
top: 20px;
}
尽管蓝色方块没有不透明度值，但它的感知不透明度为0.5从红方。您可以通过蓝色方块看到红色方块。
在 CSS 中，如果您应用相同的样式，则红色和蓝色方块都是 50% 透明的。但是，您无法通过蓝色方块看到红色方块，除非您还设置了opacity的蓝色小于1.
