CSS inset 属性是其他 CSS 属性 top、right、bottom 和/或 left 的简写。
它遵循与 margin CSS 属性相同的多值语法。
inset 属性指定物理偏移量，与元素的书写模式、方向和文本方向无关。
可能的值
CSS 属性插图采用与左侧 CSS 属性相同的值集，如下所示：- <length> - 可以指定负值、空值或正值。
- <percentage> - 容器宽度的百分比。
- auto − 默认值。浏览器计算左侧位置。
- inherit − 指定从其父元素计算出的相同值。
适用于
所有定位元素。
探索我们最新的在线课程，按照自己的节奏学习新技能。注册并成为认证专家，以提升您的职业生涯。
语法
inset = <'top'>{1,4}
/* <length> values */
inset: 5px; /* value applied to all edges */
inset: 5px 10px; /* top/bottom left/right */
inset: 3px 5px 8px; /* top left/right bottom */
inset: 3.4em 5em 4em 4em; /* top right bottom left */
/* <percentage>s of the width (left/right) or height (top/bottom) of the containing block */
inset: 15% 10% 10% 10%;
/* Keyword value */
inset: auto;
CSS inset - 四个长度值
以下示例演示如何使用 inset 属性，该属性传递了四个长度值，用于确定顶部、右侧、底部和左侧偏移值。
<html>
<head>
<style>
div {
background-color: green;
width: 180px;
height: 120px;
position: relative;
}
.inset-ex {
writing-mode: sideways-rl;
position: absolute;
inset: 25px 45px 35px 15px;
background-color: greenyellow;
}
</style>
</head>
<body>
<div>
<span class="inset-ex">Inset - 4 values</span>
</div>
</body>
</html>
CSS inset - 三个长度值
以下示例演示如何使用 inset 属性，该属性传递了三个长度值，用于确定顶部、右侧、底部和左侧偏移值。
<html>
<head>
<style>
div {
background-color: green;
width: 180px;
height: 120px;
position: relative;
}
.inset-ex {
writing-mode: sideways-rl;
position: absolute;
inset: 25px 35px 15px;
background-color: greenyellow;
}
</style>
</head>
<body>
<div>
<span class="inset-ex">Inset - 3 values</span>
</div>
</body>
</html>
CSS inset - 两个长度值
以下示例演示如何使用 inset 属性，该属性传递了两个长度值，用于确定顶部、右侧、底部和左侧偏移值。
<html>
<head>
<style>
div {
background-color: green;
width: 180px;
height: 120px;
position: relative;
}
.inset-ex {
writing-mode: sideways-rl;
position: absolute;
inset: 25px 35px;
background-color: greenyellow;
}
</style>
</head>
<body>
<div>
<span class="inset-ex">Inset - 2 values</span>
</div>
</body>
</html>
CSS inset - 一个长度值
下面的示例演示如何使用 inset 属性，该属性仅传递给一个长度值，该值确定顶部、右侧、底部和左侧偏移值。
<html>
<head>
<style>
div {
background-color: green;
width: 180px;
height: 120px;
position: relative;
}
.inset-ex {
writing-mode: sideways-rl;
position: absolute;
inset: 35px;
background-color: greenyellow;
}
</style>
</head>
<body>
<div>
<span class="inset-ex">Inset - 1 value</span>
</div>
</body>
</html>
CSS inset - 百分比值
以下示例演示如何使用 inset 属性，该属性传递了两个百分比值，用于确定顶部、右侧、底部和左侧偏移值。
<html>
<head>
<style>
div {
background-color: green;
width: 180px;
height: 120px;
position: relative;
}
.inset-ex {
writing-mode: sideways-rl;
position: absolute;
inset: 25% 35%;
background-color: greenyellow;
}
</style>
</head>
<body>
<div>
<span class="inset-ex">Inset - 2 % values</span>
</div>
</body>
</html>
CSS 插图 - 混合值
以下示例演示了如何使用具有混合值的 inset 属性，即一个长度和另一个作为传递给它的百分比值，用于确定顶部、右侧、底部和左侧偏移值。
<html>
<head>
<style>
div {
background-color: green;
width: 180px;
height: 120px;
position: relative;
}
.inset-ex {
writing-mode: sideways-rl;
position: absolute;
inset: 0.25em 10%;
background-color: greenyellow;
}
</style>
</head>
<body>
<div>
<span class="inset-ex">Inset - mixed values</span>
</div>
</body>
</html>
CSS inset - 自动值
以下示例演示如何使用 inset 属性，并将 auto 值传递给它，该属性确定顶部、右侧、底部和左侧偏移值。
<html>
<head>
<style>
div {
background-color: green;
width: 180px;
height: 120px;
position: relative;
}
.inset-ex {
writing-mode: vertical-lr;
position: absolute;
inset: auto;
background-color: greenyellow;
}
</style>
</head>
<body>
<div>
<span class="inset-ex">Inset - auto</span>
</div>
</body>
</html>
CSS inset - 相关属性
下表列出了 CSS inset 的所有相关属性：
| 属性 | 描述 |
|---|---|
| bottom | 设置定位元素在底部的垂直位置。 |
| left | 设置左侧定位元素的水平位置。 |
| right | 设置右侧定位元素的水平位置。 |
| top | 设置定位元素在顶部的垂直位置。 |
| margin | 用于设置元素边距的简写。 |
| inset-block | 指定元素的逻辑块开始和结束偏移量。 |
| inset-inline | 指定元素在内联方向上的逻辑块开始和结束偏移。 |
