使用 CSS xywh() 函数绘制布局友好的形状

你需要一个随容器缩放的裁剪矩形。你想到了 clip-path,但定义形状的方式让人感觉很别扭。是应该计算每条边的 inset 值吗?当容器调整大小时会发生什么?

CSS xywh() 函数通过让你以直观的方式定义矩形来解决这个问题:起始点加上尺寸。它现在已经在所有现代浏览器中获得基准支持,使其成为生产环境中响应式裁剪的可靠选择。

什么是 CSS xywh() 函数?

xywh() 函数通过指定四个值来创建矩形基本形状:左上角的 x 和 y 坐标,然后是宽度和高度。它与 inset()、circle()、ellipse() 和 polygon() 一起属于 CSS 基本形状家族。

.element {
  clip-path: xywh(10% 10% 80% 80%);
}

这会将元素裁剪为一个矩形,从左侧开始 10%,从顶部开始 10%,跨越 80% 的宽度和 80% 的高度。所有四个值都接受任何 <length-percentage> 单位,使响应式裁剪变得简单直接。

浏览器支持:2025 年可用于生产环境

xywh() 函数已达到 Baseline 2024 标准,可在以下浏览器中使用:

• Chrome/Edge 119+
• Firefox 122+
• Safari 17.2+

这不是需要标志或 polyfill 的实验性技术。使用 xywh() 的现代 CSS 形状可以在用户运行的每个当前浏览器中可靠工作。

语法和参数

该函数接受四个必需值和一个可选关键字:

clip-path: xywh(x y width height round border-radius);

位置值 (x, y): 距离参考框左边缘和顶边缘的距离。

尺寸值 (width, height): 矩形的大小。这些值必须为非负数。

Round 关键字: 可选。包含时,它使用与 border-radius 相同的语法启用圆角。

/* 尖角 */
clip-path: xywh(0 0 100% 100%);

/* 统一圆角 */
clip-path: xywh(5% 5% 90% 90% round 12px);

/* 不对称圆角 */
clip-path: xywh(0 0 100% 100% round 20px 0 20px 0);

使用百分比实现响应式裁剪

当你使用百分比值时,xywh() 的真正威力才会显现。与固定像素值不同,百分比会自动响应容器大小的变化。

.card-image {
  clip-path: xywh(5% 5% 90% 90% round 8px);
}

这创建了一个响应式 clip-path 布局,无论卡片的尺寸如何,都能保持比例间距。结合视口单位或 calc() 可实现更复杂的响应式模式:

.hero-clip {
  clip-path: xywh(
    2vw 
    2vh 
    calc(100% - 4vw) 
    calc(100% - 4vh) 
    round 1rem
  );
}

xywh() vs. inset():选择正确的函数

两个函数都创建矩形,但它们处理问题的方式不同。

使用 inset() 当你要定义每条边的边距时:

/* 从所有边缘向内 20px */
clip-path: inset(20px);

使用 xywh() 当你需要明确的位置和大小控制时:

/* 在特定坐标处具有特定尺寸的矩形 */
clip-path: xywh(50px 50px 200px 150px);

当动画形状或需要一个与元素边缘不直接相关的矩形时,xywh() 函数表现出色。使用 inset() 移动形状需要重新计算所有四个边缘值。而使用 xywh(),你只需调整 x 和 y 坐标。

实际应用

具有一致内边距的图像蒙版:

.thumbnail {
  clip-path: xywh(4% 4% 92% 92% round 6px);
}

卡片角处理:

.feature-card {
  clip-path: xywh(0 0 100% 100% round 16px 16px 0 0);
}

动画显示效果:

.reveal {
  clip-path: xywh(0 0 0% 100%);
  transition: clip-path 0.3s ease-out;
}

.reveal:hover {
  clip-path: xywh(0 0 100% 100%);
}

展望未来:shape() 函数

较新的 shape() 函数为复杂路径提供了更大的灵活性,但 xywh() 仍然是矩形形状的正确工具。它更简单、更易读,并且在今天已经完全支持。

结论

CSS xywh() 函数为矩形裁剪提供了简洁、直观的语法,可以自然地适应响应式布局。其基于百分比的值消除了容器调整大小时的手动计算,而熟悉的 border-radius 语法用于圆角使你的代码保持一致。

对于任何需要矩形的 clip-path 布局——无论是静态蒙版还是动画显示——xywh() 现在是所有现代浏览器中可用于生产环境的选择。

常见问题

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..