rect()

语法

offset-path: rect(0 1% auto 3% round 0 1px);
clip-path: rect(50px 70px 80% 20%);

值

内嵌矩形通过指定四个偏移值来定义，从顶部边缘偏移开始，然后顺时针方向，以及一个可选的 round 关键字和 border-radius 参数来为矩形添加圆角。每个偏移值可以是 <length>、<percentage> 或关键字 auto。

<length-percentage>

指定矩形顶部、右侧、底部或左侧边缘到包含块顶部或左侧边缘的距离的 <length-percentage> 值。第一个（顶部）和第三个（底部）值是距离包含块顶部边缘的距离，第二个（右侧）和第四个（左侧）值是距离包含块左侧边缘的距离。第二个（右侧）和第三个（底部）值分别被第四个（左侧）和第一个（顶部）值限制，以防止底部边缘越过顶部边缘，右侧边缘越过左侧边缘。例如，rect(10px 0 0 20px) 被限制为 rect(10px 20px 10px 20px)。

auto

使使用此值的边缘与包含块的相应边缘重合。如果第一个（顶部）或第四个（左侧）值使用 auto，则 auto 的值为 0；如果第二个（右侧）或第三个（底部）值使用 auto，则 auto 的值为 100%。

round <'border-radius'>

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

正式语法

<rect()> = 
  rect( <top> , <right> , <bottom> , <left> )  

示例

使用 rect() 创建 offset-path

在此示例中，offset-path 属性使用 rect() 函数来定义元素（此处为红色框）移动的路径形状。显示了三种不同的场景，每种场景都为 rect() 函数使用了不同的值。框内的箭头指向框的右边缘。

<div class="container">
  Rectangular path 1
  <div class="path rect-path-1">→</div>
</div>
<div class="container">
  Rectangular path 2
  <div class="path rect-path-2">→</div>
</div>
<div class="container">
  Rectangular path 3
  <div class="path rect-path-3">→</div>
</div>

.container {
  position: relative;
  display: inline-block;
  width: 200px;
  height: 200px;
  border: 1px solid black;
  margin: 15px;
  text-align: center;
}

.path {
  width: 40px;
  height: 40px;
  background-color: red;
  position: absolute;
  animation: move 10s linear infinite;
}

.rect-path-1 {
  offset-path: rect(50px 150px 200px 50px round 20%);
}

.rect-path-2 {
  offset-path: rect(50px auto 200px 50px round 20%);
}

.rect-path-3 {
  offset-path: rect(50px auto 200px auto);
}

@keyframes move {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}

结果

• 路径 1 矩形指定了四个边缘（顶部、右侧、底部和左侧）与包含块的距离。顶部和底部值是距包含块顶部边缘的距离。右侧和左侧值是距包含块左侧边缘的距离。此外，矩形的拐角以 20% 的弧度圆角，使红色框元素在沿此路径移动时跟随圆角。请注意框内的箭头在矩形路径拐角处如何跟随曲线。
• 路径 2 矩形与路径 1 矩形类似，不同之处在于右侧值为 auto，其值等于 100%。这导致矩形的右边缘与包含块的右边缘匹配，从而创建比路径 1 更宽的矩形。
• 路径 3 矩形将左侧和右侧边缘参数都指定为 auto，并省略了 round <'border-radius'> 参数。这会创建一个宽度与包含块相同且具有矩形角而不是像路径 1 和路径 2 矩形那样的圆角的矩形。请注意此框内箭头在拐角处的移动。

规范

浏览器兼容性

另见

• inset() 函数
• xywh() 函数
• clip-path 属性
• offset-path 属性
• <basic-shape> 数据类型
• CSS 形状模块
• 基本形状指南