HTML | DOM 样式 outlineOffset 属性

Style outlineOffset属性用于偏移轮廓并将其绘制到边框边缘之外。
与边框不同，轮廓不占空间。它返回一个字符串，表示元素的轮廓偏移属性。
句法：

• 获得财产

object.style.outlineOffset

• 设置属性

object.style.outlineOffset = "length|initial|inherit"

属性值：

Value	Description
length	Define length in length unit.
initial	define initial value which is default.
inherit	Inherit property from parent element

下面的程序说明了 Style outlineOffset 属性方法：
例子：

html

 

    Style outlineOffset Property in HTML
    
        #samplediv {
            margin: auto;
            border: 2px green;
            outline: coral solid 4px;
            width: 250px;
            height: 50px;
        }
         
        h1 {
            color: green;
        }
         
        h2 {
            font-family: Impact;
        }
         
        body {
            text-align: center;
        }
    

 

 
    GeeksforGeeks
    Style outlineOffset Property
    
 
     
For moving the ouline border outside the border edge, double click the "Change Outline Border" button: 
 
    
 
    
        Change Outline Border
    
 
    
        Geeksforgeeks
    
 
    
        function outline() {
            document.getElementById("samplediv")
                .style.outlineOffset = "20px";
        }
    
 

 

输出：

• 在点击按钮之前：

• 点击按钮后：

支持的浏览器： HTML支持的浏览器|下面列出了 DOM 样式的 outlineOffset 属性：

• IE浏览器
• 谷歌浏览器
• 火狐
• 歌剧
• 苹果浏览器