CSS Contour Outline Usage

Source: Internet
Author: User

Previous words

Contour Outline is outside the border boundary, it does not participate in the document flow like a border, so the outline does not affect the flow of the document when it appears or disappears, that is, does not cause the document to be re-displayed. With outlines, the browser can merge parts of the contour to create a continuous, but non-rectangular shape. By default, the contour is a dynamic style that is rendered only when the element gets to the focus or is activated

Note Ie7-Browser does not support

Outline Style

Similar to borders, the most basic aspect of a contour is style, and if a contour has no style, the outline will not exist at all. Unlike a border, the value is less than one hidden


Value: none | Dotted | Dashed | Solid | Double | Groove | Ridge | Inset | Outset | Inherit

Initial value: None

Applies to: all elements

Inheritance: None

Contour Width

Similar to borders, contour widths cannot be negative, nor can they be specified as percent values


Value: Thin | Medium | Thick | <length> | Inherit

Initial value: Medium

Applies to: all elements

Inheritance: None

[note] If the style of the contour is none, the contour width is calculated as a value of 0

Outline Color

Unlike borders, the contour color has the keyword invert inverse color profile, which represents the full inverse color conversion of the pixel in which the contour is located, making the contour visible in different background colors. But in fact the INVERT keyword is only supported by IE browser, the contour color of other browsers is the foreground color of the element itself


Value: <color> | Invert | Inherit

Initial value: Invert (IE), foreground color (other browsers)

Applies to: all elements

Inheritance: None

Contour Offset

The contour offset is used to define the value of the offset position of the contour. When the parameter value is positive, the contour is offset outward, and when the parameter value is negative, the contour is inward offset

Note IE Browser does not support


Value: Length | Inherit

Initial value: 0

Applies to: all elements

Inheritance: None


Contour Outline is similar to the border property of a border style, allowing the setting of outline style, width, and color to be completed one time. Because a given contour must adopt a uniform style, width, and color, outline is the only shorthand attribute on the contour. There are no attributes such as Outline-top or Outline-right for outlines

[Note that Outline-offset is not included in the]outline and needs to be set separately for Outline-offset


Value: [<outline-color> | | <outline-style> | | <outline-width>] | Inherit

Initial value: None

Applies to: all elements

Inheritance: None


Because contour outline does not affect the size of the box model of the element, it does not affect the layout of the page, so you can use outline to mimic the border border effect. But if it's a rounded border, it's not that good.

The Firefox browser supports the private property-moz-outline-radius to set the outline fillet. This property corresponds to the JS notation is Mozoutlineradius

For other browsers, we can use other properties to achieve similar effects. Box-shadow and Border-radius attribute same strain, that is, if the Border-radius is rounded, the Box-shadow projection is also rounded

<p class= "show" > Test content </p>

.show{margin:50px;    width:100px;    height:100px;    Background-color:pink;    border-radius:1px; box-shadow:0 0 0 30px lightblue;} 
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.