inset()

The inset() CSS function defines a rectangle at the specified inset distances from each side of the reference box. It is a basic shape function used to define one of the <basic-shape> data types.

尝试一下

语法

css
shape-outside: inset(20px 50px 10px 0 round 50px);

值

<length-percentage>{1,4}

当提供所有四个参数时，它们分别表示从参考框向内定义内嵌矩形边缘位置的顶部、右侧、底部和左侧偏移量。这些参数遵循边距简写语法，允许您使用一个、两个或四个值设置所有四个内边距。

如果某一维度上的内边距对之和超过该维度的 100%，则两个值将按比例缩减，使它们的和等于 100%。例如，值 inset(90% 10% 60% 10%) 具有 90% 的顶部内边距和 60% 的底部内边距。这些值将按比例缩减为 inset(60% 10% 40% 10%)。这种形状（不包含任何区域且没有 shape-margin），不会影响换行。

<border-radius>

可选的 <border-radius> 参数使用边框半径简写语法定义内嵌矩形的圆角。

正式语法

<inset()> = 
  inset( <length-percentage>{1,4} [ round <'border-radius'> ]? )  

<length-percentage> = 
  <length>      |
  <percentage>  

<border-radius> = 
  <length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?

示例

基本内边距示例

在下面的示例中，我们使用 inset() 形状将内容拉到浮动元素之上。更改偏移值以查看形状如何变化。

html
<div class="box">
  <div class="shape"></div>
  <p>
    One November night in the year 1782, so the story runs, two brothers sat
    over their winter fire in the little French town of Annonay, watching the
    grey smoke-wreaths from the hearth curl up the wide chimney. Their names
    were Stephen and Joseph Montgolfier, they were papermakers by trade, and
    were noted as possessing thoughtful minds and a deep interest in all
    scientific knowledge and new discovery. Before that night—a memorable night,
    as it was to prove—hundreds of millions of people had watched the rising
    smoke-wreaths of their fires without drawing any special inspiration from
    the fact.
  </p>
</div>
css
.box {
  width: 400px;
  margin: 0 auto;
}

.shape {
  float: left;
  width: 150px;
  height: 100px;
  clip-path: inset(45px 50px 15px 0 round 50px);
  shape-outside: inset(40px 40px 10px 0 round 50px);
  background-color: coral;
  border-radius: 20px;
  margin: 0;
  padding: 20px;
}

规范

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

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅