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 形状模块
- 基本形状指南