rect()
rect()
CSS 函数在指定距离包含块的顶部和左边边缘的地方创建一个矩形。它是 <basic-shape>
数据类型 的基本形状函数。您可以在 CSS 属性(例如 offset-path
)中使用 rect()
函数,以创建元素移动的矩形路径,以及在 clip-path
中定义裁剪区域的形状。
语法
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
的值为100%
。 round <'border-radius'>
-
使用与 CSS
border-radius
简写属性相同的语法指定矩形圆角的半径。此参数是可选的。
示例
使用 rect() 创建偏移路径
在此示例中,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 的矩形那样具有圆角。请注意箭头在这个框内的角上的移动。
规范
规范 |
---|
CSS Shapes 模块级别 1 # funcdef-basic-shape-rect |
浏览器兼容性
BCD 表格只在启用 JavaScript 的浏览器中加载。
另请参见
inset()
函数xywh()
函数clip-path
属性offset-path
属性<basic-shape>
数据类型- CSS 形状 模块
- 基本形状指南