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

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
inset()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见