xywh()
xywh() CSS 函式使用從包含塊的左邊緣 (x) 和上邊緣 (y) 的指定距離以及矩形的指定寬度 (w) 和高度 (h) 建立一個矩形。它是 <basic-shape> 資料型別 的基本形狀函式。你可以在 CSS 屬性（例如 offset-path）中使用 xywh() 函式來建立元素移動的矩形路徑，在 clip-path 中使用它來定義剪下區域的形狀。
語法
css
offset-path: xywh(0 1% 2px 3% round 0 1px 2% 3px);
clip-path: xywh(1px 2% 3px 4em round 0 1% 2px 3em);
值
<length-percentage>-
指定矩形
x和y座標的<length-percentage>值。 <length-percentage [0,∞]>-
指定矩形寬度和高度的非負
<length-percentage>值。最小值可以為零，最大值沒有限制。 round <'border-radius'>-
使用與 CSS
border-radius簡寫屬性相同的語法指定矩形圓角的半徑。此引數是可選的。
正式語法
<xywh()> =
xywh( <length-percentage>{2} <length-percentage [0,∞]>{2} [ round <'border-radius'> ]? )
<length-percentage> =
<length> |
<percentage>
<border-radius> =
<length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?
示例
使用 xywh() 建立 offset-path
在下面的示例中，offset-path 屬性使用 xywh() 函式來定義元素（在本例中為洋紅色框）移動的路徑形狀。顯示了兩種不同的場景，每種場景的 xywh() 函式值都不同。框內的箭頭指向框的右邊緣。
html
<div class="container">
Rectangular path 1
<div class="path xywh-path-1">→</div>
</div>
<div class="container">
Rectangular path 2
<div class="path xywh-path-2">→</div>
</div>
css
.container {
position: relative;
display: inline-block;
width: 200px;
height: 200px;
border: 1px solid black;
margin: 30px;
text-align: center;
}
.path {
width: 50px;
height: 50px;
position: absolute;
background-color: magenta;
animation: move 10s linear infinite;
}
.xywh-path-1 {
offset-path: xywh(20px 20px 100% 100% round 10%);
}
.xywh-path-2 {
offset-path: xywh(20px 30% 150% 200%);
}
@keyframes move {
0% {
offset-distance: 0%;
}
100% {
offset-distance: 100%;
}
}
結果
- 路徑 1 矩形從包含塊的左邊緣和上邊緣偏移
20px。此路徑矩形與包含塊具有相同的尺寸，即寬度是包含塊寬度的100%，高度是包含塊高度的100%。請注意框中的箭頭如何沿著矩形路徑角處的10%曲線（由round 10%定義）移動。 - 由於
xywh()中寬度和高度的上限都是無窮大，因此將路徑 2 矩形的高度設定為200%會使生成的矩形比包含塊高兩倍。請注意當未指定round <'border-radius'>時，框中的箭頭在角處的行為。
規範
| 規範 |
|---|
| CSS Shapes Module Level 1 # funcdef-basic-shape-xywh |
瀏覽器相容性
載入中…
另見
inset()函式rect()函式clip-path屬性offset-path屬性<basic-shape>資料型別- CSS 形狀模組
- 基本形狀指南