源内容（英文）

CSS 中的 inset 属性用于定义物理偏移量，而不是用于行内偏移或逻辑块偏移。此属性可以应用于任何 writing-mode 属性。

语法：

inset: length|percentage|auto|inherit|initial|unset;

属性值：

• length: 它设置一个以 px、cm、pt 等定义的固定值。允许使用负值。其默认值为 0px。
• percentage: 它与 length 类似，但是根据窗口大小的百分比来设置尺寸。
• auto: 当希望由浏览器确定 inset 大小时使用。
• initial: 它用于将 inset 属性的值设置为其默认值。
• inherit: 它从父元素继承 inset 属性值。
• unset: 它用于取消设置 inset 属性，并且是其默认值。

下面的示例说明了 CSS 中的 inset 属性：

示例 1：

    
    
        h1 {
            color: green;
        }
        
        div {
            background-color: purple;
            width: 200px;
            height: 100px;
            position: relative;
        }
        
        .one {
            position: relative;
            inset: 10px 40px 30px 0px;
            background-color: #c8c800;
        }
    


    
        
Geeksforgeeks
        CSS | inset Property
        


        

            

            A Computer Science Portal
            
        
    

输出：

!image

示例 2：

    
    
        h1 {
            color: green;
        }
        
        div {
            background-color: purple;
            width: 200px;
            height: 100px;
            position: relative;
        }
        
        .one {
            position: relative;
            inset: 10% 5% 5% 0%;
            background-color: green;
        }
    


    
        
Geeksforgeeks
        CSS | inset Property
        


        

            

            A Computer Science Portal
            
        
    

输出：

!image

支持的浏览器： 支持 inset 属性的浏览器如下所示：

• Google Chrome 87+
• Edge 87+
• Firefox 66+
• Opera 73+
• Safari 14.1+

参考： https://developer.mozilla.org/en-US/docs/Web/CSS/inset