inset
尝试一下
此属性虽然为 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
属性相同。
形式定义
初始值 | as each of the properties of the shorthand: |
---|---|
适用元素 | 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) |
计算值 | as each of the properties of the shorthand:
|
Animation type | a length, percentage or calc(); |
形式语法
示例
为元素设置偏移
HTML
<div>
<span class="exampleText">示例文本</span>
</div>
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
(en-US) margin
简写属性的多值语法