UI 外觀修飾符

通過利用 外觀修飾符，您可以進一步自訂您的 GuiObjects 的外觀。

• 對對象的背景應用 漸變。
• 對文本或邊框應用 描邊。
• 設置對象的 圓角。
• 增加對象邊框之間的 內邊距。
• 在對象後面添加 陰影。

漸變

UIGradient 對象將顏色和透明度漸變應用於其父 GuiObject。

您可以通過以下方式配置漸變：

• 通過漸變的 Color 屬性中的 ColorSequence 設置其 顏色。
• 通過漸變的 Transparency 屬性中的 NumberSequence 設置其 透明度。
• 通過 Type 屬性選擇漸變的 類型。
• 通過 Offset 屬性選擇漸變的 起始點（在父邊界內部或外部）。
• 通過 Rotation 屬性選擇漸變的 角度。
• 通過 Scale 屬性選擇漸變的 縮放。
• 通過 TileMode 屬性選擇漸變的 邊緣取樣 行為。

顏色序列

要設置漸變的顏色序列：

1. 在 資源管理器 窗口中，選擇 UIGradient。

2. 在 屬性 窗口中，點擊 Color 屬性字段內，然後點擊輸入框右側的 ⋯ 按鈕。

   

3. 顏色序列底部軸上的每個三角形都是一個 關鍵點，決定該點的顏色值。

   

   1. 點擊顏色序列中的關鍵點以選擇或重新定位它，或通過在圖表上單擊任何位置添加另一個關鍵點。
   2. 點擊 顏色 旁邊的小方塊以打開 顏色 彈出窗口，然後選擇關鍵點的所需顏色。
   3. 如有需要，重複這些步驟以在圖表上添加/調整顏色。

透明度

要調整漸變在其範圍內的透明度：

1. 在 資源管理器 窗口中，選擇 UIGradient。

2. 在 屬性 窗口中，點擊 Transparency 屬性字段內，然後點擊輸入框右側的 ⋯ 按鈕。

   

3. 數字序列圖表上的每個方塊都是一個 關鍵點，決定該點的透明度值。

   

   1. 點擊數字序列中的關鍵點以選擇或重新定位它，或通過在圖表上單擊任何位置添加另一個關鍵點。
   2. 通過 時間 和 值 輸入框輸入特定的時間/值組合。
   3. 如有需要，重複這些步驟以在圖表上添加/調整透明度級別。

類型

漸變的 Type 屬性從 Linear、Radial、Elliptical 或 Conical 中設置其類型。

• Linear — 顏色/透明度序列沿元素的直線過渡。方向由其 旋轉 控制，位置由其 偏移 控制。這是默認值。

• Radial — 顏色/透明度序列從元素的中心向外輻射，選擇性地由 Offset 偏移。半徑由元素的寬度和高度的平均值除以二定義，實際上是 $\text{(width+height)/4}$。Rotation 對徑向漸變沒有影響。

• Elliptical — 顏色/透明度序列從元素的中心向外輻射形成橢圓，選擇性地由 Offset 偏移。橢圓的水平和垂直半徑分別是元素的寬度和高度的一半，因此橢圓適合元素的邊界。Rotation 旋轉橢圓的軸。

• Conical — 顏色/透明度序列順時針掃過元素的中心，選擇性地由 Offset 偏移。Rotation 控制掃描的起始和結束角度。默認情況下，這從 0 掃到 360 度，但 Scale 值小於 1 可以減少該角度。

偏移和旋轉

Offset 和 Rotation 屬性讓您調整漸變的控制點及其角度。如以下圖所示，Offset 是基於父級的寬度或高度的 百分比，正值或負值都是有效的。

同樣，當您旋轉漸變時，控制點也會旋轉：

縮放

漸變的 Scale 乘以漸變的範圍，控制顏色/透明度序列在元素內的可見程度。

• 當 Scale 小於 1 時，漸變的範圍小於完整範圍。剩餘的顏色/透明度根據 TileMode 屬性填充。

• 當 Scale 大於 1 時，漸變的範圍超過完整範圍，只有部分顏色/透明度是可見的。

• 對於 Elliptical 漸變，Scale 影響橢圓的兩個半徑。

瓷磚模式

TileMode 屬性設置當完整序列未完全覆蓋父元素時漸變的重複方式。

• Clamp — 默認模式，其中序列開始和結束的顏色/透明度值無限延伸，因此開始值填充漸變之前的任何區域，結束值填充漸變之後的任何區域。

• Repeat — 漸變通過無縫地從結尾包裝顏色/透明度序列回到開始來重複。如果序列中的第一個和最後一個顏色/透明度值不同，則可能會產生可見的接縫。

• Mirror — 漸變在每個邊界處反射，因此顏色/透明度序列來回反彈。這會產生平滑的重複，沒有接縫，因為方向在每個瓷磚邊緣反轉。

描邊

UIStroke 實例對文本或邊框應用輪廓。主要特點包括：

• 可調的 顏色 和 厚度 的描邊輪廓。
• 能夠獨立於父級的透明度設置描邊 透明度。
• 可自定義相對於父邊框的 位置和/或偏移。
• 三種 角落樣式（圓形、斜角或尖角）。
• 通過 UIGradient 實例支持描邊 漸變。

厚度

您可以通過 Thickness 屬性設置描邊寬度，該屬性以像素（默認）或相對於父級的縮放來測量，具體取決於修飾符的 StrokeSizingMode。如果描邊在文本上，並且 StrokeSizingMode 設置為 ScaledSize，則厚度相對於字體大小。

顏色或漸變

您可以通過 Color 屬性設置描邊顏色，並插入子 UIGradient 實例以創建漸變描邊。

文本輪廓或邊框

根據其父級類型，UIStroke 可以作為 文本輪廓 或 邊框 操作。當您將 UIStroke 作為文本對象（如 TextLabel）的父級時，它應用於文本的輪廓；當您將 UIStroke 作為其他 GuiObjects 的父級時，它應用於邊框。

當應用於文本對象時，您可以通過 ApplyStrokeMode 屬性覆蓋默認的描邊行為，讓您可以將描邊應用於對象的邊界而不是文本本身。您甚至可以通過將兩個 UIStroke 實例作為文本對象的父級來獨立控制文本輪廓和邊框，一個設置為 上下文，另一個設置為 邊框。

邊框位置/偏移

BorderStrokePosition 設置描邊相對於其父邊框的位置，BorderOffset 讓您指定描邊位置的額外偏移。

透明度

Transparency 屬性獨立於父對象的 BackgroundTransparency 或 TextTransparency 設置描邊透明度。這使您可以渲染 "空心" 的文本和邊框（僅由輪廓組成）。

角落樣式

LineJoinMode 屬性讓您控制角落的解釋方式。它接受 Round、Bevel 或 Miter 的值。

分層

要在 GuiObject 上從前到後分層多個兄弟 UIStroke 實例，您可以利用 ZIndex 屬性。具有較低 ZIndex 的將在具有較高 ZIndex 的下方（後面）渲染。

請注意，具有相同 ZIndex 的 UIStroke 實例的渲染順序是未定義的。如果它們的渲染順序很重要，請不要應用多個具有相同索引的 UIStroke 實例。

圓角

UICorner 實例對其父 GuiObject 的角落應用變形。您可以通過 CornerRadius 屬性控制應用的半徑，使用 Scale 或 Offset。

Scale 將角落圓化為基於父級 最短 邊的總長度的 百分比，這意味著 0.5 或更高的縮放會將父級變形為 "藥丸" 形狀，無論其寬度或高度如何。Offset 將角落圓化為特定數量的 像素，無論父級的寬度/高度如何。

您還可以通過 TopLeftRadius、TopRightRadius、BottomRightRadius 和 BottomLeftRadius 屬性控制 單個角落。

內邊距

UIPadding 對象對父 GuiObject 的內容應用上、下、左和/或右內邊距。例如，您可以通過對修飾符的 PaddingBottom 屬性應用偏移來向下或向上移動文本。

陰影

UIShadow 對象為其父 UI 實例渲染陰影。陰影可以跟隨父級的矩形形狀或文本對象的字形。形狀陰影可以出現在父級的外部或內部，並遮罩直接位於父級後面的區域。形狀和文本陰影都可以使用顏色漸變。

如果父級有 UICorner 或非零的 GuiObject.Rotation，則其形狀陰影將遵循相同的角落或旋轉。UIShadow 不支持 Path2D 或紋理。

形狀和文本陰影

Mode 屬性決定什麼會投射陰影，並且兩種模式可以在同一父級下共存。

• Shape 是默認值。陰影跟隨任何 GuiObject 的矩形區域。
• Text 跟隨 TextLabel、TextButton 或 TextBox 的文本字形。在此模式下，其他 UI 對象不會渲染陰影。

Spread、Inset 和 ShowBehindParent 在文本模式下無效。

模糊

BlurRadius 屬性決定陰影的模糊程度。較大的值使陰影的邊緣看起來更柔和。請注意，這個 UDim 屬性的 縮放 因子是相對於父級的寬度或高度，取較短者。

顏色和透明度

Color 屬性決定陰影的顏色，而 Transparency 設置陰影的透明度，0 為完全不透明，1 為完全透明。

要實現多色陰影，將 UIGradient 插入為 UIShadow 的子項。漸變影響陰影而不改變父級的填充。

偏移和擴展

Offset 屬性將陰影相對於父級的位置移動，而 Spread 則相對於父級的大小擴展或縮小陰影。

內嵌陰影

將 Inset 設置為 true 以在父級上方和內部渲染陰影，而不是在其後面。正的 Spread 值將內嵌陰影擴展到父級的中心。

顯示透明父級後面的內容

默認情況下，ShowBehindParent 為 true，因此整個形狀陰影都會渲染，包括直接位於父級後面的部分。將其設置為 false 以遮罩陰影的該部分。這防止陰影使透過透明父級可見的內容變暗。

此屬性對內嵌或文本陰影無效。

分層陰影

將多個 UIShadow 實例添加到同一父級以組合效果。ZIndex 屬性控制它們的渲染順序。具有較低值的陰影在具有較高值的陰影後面渲染。

共享相同 ZIndex 的陰影的渲染順序是未定義的。當它們的順序很重要時，為每個兄弟陰影分配不同的值。