函数简介
inset()函数为一个矩形块添加边距和圆角样式。此函数可用于为<base-shape>类型的CSS属性赋值，如：clip-path、shape-outside。
函数语法
<inset()> =
inset( <length-percentage>{1,4} [ round <'border-radius'> ]? )
clip-path: inset(10px); // 形状内边距10px
shape-outside: inset(10px 20px round 5px); // 形状内边距上下10px，左右20px；圆角5px此函数可接收尺寸单位和百分比，设置矩形边距，值可以有1~4个，用空格分隔（可参照margin属性值的格式）；如果中间有round关键字，则后面定义的是圆角样式，值可以有1~4个，用空格分隔（可参照border-radius属性值的格式）。
用法与最佳实践
- <length-percentage>{1,4}
当提供了四个参数时，它们分别表示从参考框的上侧、右侧、下侧和左侧向内的偏移量，这些偏移量定义了内嵌矩形边缘的位置。这些参数遵循边距简写的语法，它允许你定义具有一个、两个或四个值的 inset。（可参照margin属性值的格式）
- <border-radius>
可选的 <border-radius> 参数，紧跟在round关键词后，使用边框半径简写语法为内嵌矩形定义圆角。（可参照border-radius属性值的格式）
示例代码
// CSS
.shape {
float: left;
width: 150px;
height: 100px;
shape-outside: inset(20px 50px 10px 0 round 50px);
background-color: rebeccapurple;
border: 2px solid black;
border-radius: 10px;
margin: 20px;
padding: 20px;
}
// 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和HTML在网页中呈现的效果如下：
以上为最基础的用法。我们还可以通过将其与图片、CSS关键帧动画等高级CSS功能结合使用，创建出更绚丽、更动态的样式效果。
好了，矩形边角函数inset()就介绍到这儿了，赶紧动手试试吧！
更多精通CSS的相关精彩文章制作中，敬请期待。欢迎点赞、收藏和转发！
“属性值函数”系列文章：