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);

Values

<length-percentage>

指定矩形 x 和 y 坐标的 <length-percentage> 值。

<length-percentage [0,∞]>

指定矩形宽度和高度的非负 <length-percentage> 值。最小值可以为零，最大值没有限制。

round <'border-radius'>

使用与 CSS border-radius 简写属性相同的语法来指定矩形圆角的半径。此参数是可选的。

示例

使用 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%;
  }
}

Result

  • 路径 1 矩形从包含块的左侧和顶部边缘偏移了 20px。此路径矩形的尺寸与包含块相同，即宽度为包含块宽度的 100%，高度为包含块高度的 100%。请注意，框内的箭头如何遵循矩形路径角处的 10% 曲线（由 round 10% 定义）。
  • 由于 xywh() 中宽度和高度的上限都是无穷大，因此在路径 2 的矩形中将高度设置为 200% 会使生成的矩形的高度是包含块的两倍。注意当没有指定 round <'border-radius'> 时，框内的箭头在角落处的行为。

规范

规范
CSS 形状模块级别 1
# funcdef-basic-shape-xywh

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅