CSS 函数 - inset()



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

可能的值

  • <length-percentage>{1,4} - `inset()` 函数使用四个参数来定义矩形相对于参考框的顶部、右侧、底部和左侧的内偏移量。类似于 margin 速记,此函数可用于使用一个、两个或四个值来定义内边距。

  • <border-radius> - 这些是可选的,并根据 border-radius 速记的语法定义内嵌矩形的圆角。

语法

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

CSS inset() - 基本示例

以下示例演示了 `inset()` 函数与 `shape-outside` 属性结合使用的情况。

<html>
<head>
<style>
   div {  
      float: right;
      width: 250px;
      height: 150px;
      shape-outside: inset(20px);
   }
</style>
</head>
<body>
<div></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit vel bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum.</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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, sapien vel bibendum bibendum, velit sapien bibendum sapien, vel bibendum sapien velit sed sapien. Sed euismod, sapien vel bibendum bibendum, velit sapien bibendum sapien, vel bibendum sapien velit sed sapien. Donec euismod, sapien vel bibendum bibendum, velit sapien bibendum sapien, vel bibendum sapien velit sed sapien. Sed euismod, sapien vel bibendum vel bibendum, velit sapien bibendum sapien, vel vel bibendum sapien velit sed sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, sapien vel bibendum bibendum, velit sapien bibendum sapien, vel bibendum sapien velit sed sapien. Sed euismod, sapien vel bibendum bibendum, velit sapien bibendum sapien, vel bibendum sapien velit sed sapien. Donec euismod, sapien vel bibendum bibendum, velit sapien bibendum sapien, vel bibendum sapien velit sed sapien. Sed euismod, sapien vel bibendum vel bibendum, velit sapien bibendum sapien, vel vel bibendum sapien velit sed sapien.</p>
</body>
</html>   
广告