inset
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.
尝试一下
此属性虽然为 CSS 逻辑属性规范的一部分,但是无论元素的书写模式、行内方向和文本朝向如何,其所定义的都不是逻辑偏移而是实体偏移。
语法
css
/* 长度值 */
inset: 10px; /* 应用于所有边 */
inset: 4px 8px; /* 上下 | 左右 */
inset: 5px 15px 10px; /* 上 | 左右 | 下 */
inset: 2.4em 3em 3em 3em; /* 上 | 右 | 下 | 左 */
/* 包含块的宽度(左或右)或高度(上或下)的百分比 */
inset: 10% 5% 5% 5%;
/* 关键词值 */
inset: auto;
/* 全局值 */
inset: inherit;
inset: initial;
inset: revert;
inset: revert-layer;
inset: unset;
取值
inset
属性的取值与 left
属性相同。
形式定义
初始值 | 该简写所对应的每个属性: |
---|---|
适用元素 | positioned elements |
是否是继承属性 | 否 |
Percentages | relative to the containing block’s size in the corresponding axis (e.g. width for left or right, height for top or bottom) |
计算值 | 该简写所对应的每个属性:
|
动画类型 | a length, percentage or calc(); |
形式语法
inset =
<'top'>{1,4}
<top> =
auto |
<length-percentage> |
<anchor()> |
<anchor-size()>
<length-percentage> =
<length> |
<percentage>
<anchor()> =
anchor( <anchor-name>? &&
<anchor-side> , <length-percentage>? )
<anchor-size()> =
anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )
<anchor-name> =
<dashed-ident>
<anchor-side> =
inside |
outside |
top |
left |
right |
bottom |
start |
end |
self-start |
self-end |
<percentage> |
center
<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline
示例
为元素设置偏移
HTML
html
<div>
<span class="exampleText">示例文本</span>
</div>
CSS
css
div {
background-color: yellow;
width: 150px;
height: 120px;
position: relative;
}
.exampleText {
writing-mode: sideways-rl;
position: absolute;
inset: 20px 40px 30px 10px;
background-color: #c8c800;
}
结果
规范
Specification |
---|
CSS Logical Properties and Values Level 1 # propdef-inset |
浏览器兼容性
BCD tables only load in the browser
参见
- 盒偏移的全称属性:
top
、right
、bottom
和left
- 对应的逻辑简写属性:
inset-block
和inset-inline
margin
简写属性的多值语法