Community Learn Tools Library Leisure

English

Programming Dictionary

Online technical manual for service programmers

Popular searches：
PHP
MySQL
jquery
HTML
CSS

CSS Related dictionaries

keyframes Translation example syntax

animation Translation example syntax

animation-name Translation example syntax

animation-duration Translation example syntax

animation-timing-function Translation example syntax

animation-delay Translation example syntax

animation-iteration-count Translation example syntax

animation-direction Translation example syntax

animation-play-state Translation example syntax

animation-fill-mode Translation example syntax

background Translation example syntax

background-attachment Translation example syntax

background-color Translation example syntax

background-image Translation example syntax

background-position Translation example syntax

resize Translation example syntax

background-repeat Translation example syntax

background-clip Translation example syntax

outline-offset Translation example syntax

background-origin Translation example syntax

background-size Translation example syntax

nav-up Translation example syntax

border Translation example syntax

nav-right Translation example syntax

nav-left Translation example syntax

nav-index Translation example syntax

border-bottom Translation example syntax

nav-down Translation example syntax

icon Translation example syntax

box-sizing Translation example syntax

appearance Translation example syntax

transition-delay Translation example syntax

transition-timing-function Translation example syntax

transition-duration Translation example syntax

transition-property Translation example syntax

transition Translation example syntax

backface-visibility Translation example syntax

border-bottom-color Translation example syntax

border-bottom-style Translation example syntax

perspective-origin Translation example syntax

border-bottom-width Translation example syntax

perspective Translation example syntax

border-color Translation example syntax

transform-style Translation example syntax

border-left Translation example syntax

border-left-color Translation example syntax

transform-origin Translation example syntax

border-left-style Translation example syntax

border-left-width Translation example syntax

transform Translation example syntax

border-right Translation example syntax

border-right-color Translation example syntax

word-wrap Translation example syntax

border-right-style Translation example syntax

word-break Translation example syntax

border-right-width Translation example syntax

text-wrap Translation example syntax

border-style Translation example syntax

text-shadow Translation example syntax

border-top Translation example syntax

border-top-color Translation example syntax

border-top-style Translation example syntax

text-overflow Translation example syntax

border-top-width Translation example syntax

text-outline Translation example syntax

border-width Translation example syntax

text-justify Translation example syntax

outline Translation example syntax

outline-color Translation example syntax

text-emphasis Translation example syntax

outline-style Translation example syntax

punctuation-trim Translation example syntax

outline-width Translation example syntax

hanging-punctuation Translation example syntax

border-bottom-left-radius Translation example syntax

word-spacing Translation example syntax

border-bottom-right-radius Translation example syntax

white-space Translation example syntax

border-image Translation example syntax

border-image-outset Translation example syntax

unicode-bidi Translation example syntax

border-image-repeat Translation example syntax

border-image-slice Translation example syntax

border-image-source Translation example syntax

text-transform Translation example syntax

border-image-width Translation example syntax

border-radius Translation example syntax

text-indent Translation example syntax

border-top-left-radius Translation example syntax

text-decoration Translation example syntax

border-top-right-radius Translation example syntax

box-shadow Translation example syntax

text-align Translation example syntax

line-height Translation example syntax

letter-spacing Translation example syntax

direction Translation example syntax

overflow-x Translation example syntax

overflow-y Translation example syntax

color Translation example syntax

overflow-style Translation example syntax

css outline-offset property

Chinese translationRecent Updates：2019-01-24 10:59:04

outline

Overview

UK[ˈaʊtlaɪn] US[ˈaʊtˌlaɪn]

offset

Offset

UK[ˈɒfset] US[ˈɔ:fset]

css outline-offset property Video explanation

css outline-offset property syntax

How to use the outline-offset attribute?

Theoutline-offset property sets the distance between the outline and the edge of the border. Basic syntax: outline-offset:length; indicates that the distance between the outline and the border is length. The unit of length can be an absolute unit (such as px) or a relative unit (such as %).

Function: The outline-offset property offsets the outline and draws it on the edge of the border. Outlines differ from borders in two ways: outlines take up no space, and outlines may be non-rectangular.

Syntax: outline-offset: length|inherit;

Description: length Outline and border edge distance. Inherit specifies that the value of the outline-offset attribute should be inherited from the parent element.

Note: All major browsers support the outline-offset attribute, except Internet Explorer.

css outline-offset property example

<!DOCTYPE html>

<html>

<head>

<style> 

div{

margin:20px;

width:150px; 

padding:10px;

height:70px;

border:2px solid black;

outline:2px solid red;

outline-offset:15px;} 

</style>

</head>

<body>

<p><b>注释：</b>Internet Explorer 和 Opera 不支持 support outline-offset 属性。</p>

<div>这个 div 在边框边缘之外 15 像素处有一个轮廓。</div>

</body>

</html>

Run instance »

Click the "Run instance" button to view the online instance

submit