CSS 函数

CSS 函数 inset() 定义一个矩形,该矩形位于距参考框每侧向内一定距离的位置。它是用于定义 <basic-shape> 数据类型之一的基本表单函数之一。

可能的值

  • <length-percentage> - inset() 函数使用四个参数来定义矩形从参考框向内的顶部、右侧、底部和左侧偏移量。与 margin 简写类似,此函数可用于定义具有一个、两个或四个值的插入。

  • <border-radius> - 这些是可选的,定义插入矩形的弯角,根据 border-radius 简写的语法。

语法

shape-outside: inset(top right bottom left); 

CSS inset(): 基本示例

以下示例演示了带有 shape-outside 属性的 inset() 函数的工作原理。

<html>
<head>
<style>
   div {  
      float: right;
      width: 250px;
      height: 150px;
      shape-outside: inset(20px);
   }
</style>
</head>
<body>
<div></div>
<p>Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.</p>
</body>
</html> 

CSS inset(): 带尺寸和圆角

以下示例演示指定尺寸和圆角inset() 函数的圆角。

  • 所提供的 CSS 中的 inset() 函数在元素内创建一个插入形状,设置与其元素的 10% 距离边缘。

  • inset() 中的 round 关键字将圆角应用于此形状。

  • 使用水平半径 50 % 和 15% 的垂直半径,为围绕元素的文本创建圆形插入。

<html>
<head>
<style>
div {  
float: left;
width: 250px;
height: 200px;
shape-outside: inset(10% round 50% 15%);
background: skyblue;
}
</style>
</head>
<body>
<div></div>
<p>Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.</p>
</body>
</html>