CSS 函数 - inset（）

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

可能的值

<length-percentage>{1,4} - inset（） 函数使用四个参数来定义矩形从参考框向内的顶部、右侧、底部和左侧偏移量。与边距简写类似，此函数可用于定义具有一个、两个或四个值的插图。
<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>

本页