共计 943 个字符，预计需要花费 3 分钟才能阅读完成。
CSS inset()函数是一个图形函数，用于指定某种基本图形 <basic-shape> 类型。inset()函数用于定义矩形。
CSS <basic-shape>代表一种基本图形，它通过图形函数来定义一个图形。一个基本图形可以作为 shape-outside 属性，或 clip-path 属性的参数使用，经这些属性应用在一个元素上，可以使这个元素周围的内容环绕在它的周围，或者使用指定的图形来剪裁内容。
inset()函数的语法如下：
inset() = inset( [offset]{1,4} [round <border-radius>]? )
/* 其中.. */
offset = <length> | <percentage>inset()函数指定一个 inset 类型的矩形。它的参数为 4 个偏移值，用于指定矩形 4 条边在参考盒模型各个方向上的偏移。
4 个偏移值的取值方式和 margin 相同，如果只给出一个值，那么上右下左 4 条边都使用这个值作为偏移值。如果给出 3 个值，那么第一个值代表上边部的偏移值，第二个值代表左右边部的偏移值，第三个值代表下边部的偏移值。如果给出 2 个值，那么第一个值代表上下边部的偏移值，第二个值代表左右边部的偏移值。如果给出了 4 个值，那么它们分别代表上右下左 4 条边的偏移值。
除了 4 个偏移值，inset()函数还有一个可选的 <border-radius> 参数，用于指定矩形的圆角。它的语法格式和 border-radius 属性相同。如果要指定圆角，必须带上 round 关键字。
下面都是有效的 inset() 函数声明。
inset(10% 20% round 5px);
/* 一个带 5 像素圆角的矩形，上下 2 条边向内 10%，左右 2 条边向内 20%*/
inset(15px 20px 30px);
inset(25% round 10px 30px);
inset(10px 20px 30px 40px round 10px);浏览器支持
相关阅读
正文完
