inset()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

inset() CSS 函数定义了一个矩形，其位于参考框的每一边内侧的指定的距离处。它是用于定义 <basic-shape> 数据类型之一的基本形状函数。

尝试一下

语法

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

值

<length-percentage>{1,4}

当提供了四个参数时，它们分别表示从参考框的上侧、右侧、下侧和左侧向内的偏移量，这些偏移量定义了内嵌矩形边缘的位置。这些参数遵循边距简写的语法，它允许你定义具有一个、两个或四个值的 inset。

<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 示例

在下面的示例中，我们使用了一个 inset() 形状来拉取内容覆盖浮动元素。更改偏移值以查看形状如何变化。

规范

Specification
CSS Shapes Module Level 1
# funcdef-basic-shape-inset

浏览器兼容性

BCD tables only load in the browser

参见