preface

CSS Magic Hall: Changing menu box colors is so nitpicky! In this article, we want to simulate the effect of the native Tab box to get focus by clicking the Tab key. There is an attribute that is often ignored here — Outline. This article intends to study it a little more deeply because of its vague impression before

Spec describes it this way

role

The outline used to create a visual object (the border-box of an element), such as a form button outline, etc.

Unlike border

  1. Outline does not take up space in the document;
  2. Outline doesn’t have to be a rectangle.

Specific Attribute Description

/* Invert indicates color inversion, even if the outline is visible in different background colors */ outline-color: Invert | < color_name > | < hex_number > | < rgb_number > | inherit / * contour line style * / outline - style: None | dotted | dashed | solid | double | groove | ridge | an inset | outset | inherit / * * / outline contour line width - the width: Medium | thin | thick | < length > | inherit / * color, style, and width of the profile of one-time setup * / outline: <outline-color> <outline-style> <outline-width>; /* Outline offset: 0px; /* Outline offset: 0px; /* Outline offset: 0px;Copy the code

The devil is in the details

compatibility

As a CSS2.1 specification, outline is not supported by IE6/7/8(Q). If the correct DOCTYPE is written under IE8, outline is supported. Outline-offset is not supported in IE.

Hide outline under IE6/7/8(Q)

To hide the Outline effect under IE6/7/8(Q), add the hideFocus feature to the element.

outline:0andoutline:noneThe difference between

Execute the following code in Chrome

<style type="text/css">
 .outline0{
   outline: 0;
 }
 .outline-none{
   outline: none;
 }
</style>
<a href="#" class="outline0">outline: 0</a>
<a href="#" class="outline-none">outline: none</a>
<script type="text/javascript">
  const $ = document.querySelector.bind(document)
  const print = console.log.bind(console)
  const cssProps = ["outline-width"."outline-style"."outline-color"]
  const slctrs = [".outline0".".outline-none"]
     
  slctrs.forEach(slctr => {
    styles = window.getComputedStyle($(slctr))
      cssProps.forEach(cssProp => {
        print("%s, %s is %s", slctr, cssProp, styles[cssProp])
      })
    })
</script>
Copy the code

Results:

.outline0, outline-width is 0px .outline0, outline-style is none .outline0, outline-color is rgb(0, 0, 238) .outline-none, outline-width is 0px .outline-none, outline-style is none .outline-none, outline-color is rgb(0, 0, 238).Copy the code

Outline simply provides a convenient API for setting one or more specific Outline attributes, so outline:0 and Outline: None are essentially the same.

I can’t really get rounded corners

Since border-radius, we can create rounded rectangles and circles with CSS, and even box-shadow is influenced by border-radius so that element shadows can have rounded corners. Then can outline also make rounded corners? The answer is no. That’s because the function of outline is to outline the spatial outline occupied by the element. Although the rounded corner is realized in the visual image through border-radius, the position space occupied by the element does not change at all, it is still the same square with edges and corners.

<style type="text/css">
  .round{
    width: 100px;
    height: 100px;
    background: yellow;
    border-radius: 50%;
    outline: solid 1px red;
  }
</style>
Copy the code

Contour difference

In Chrome, outline is limited to identifying the border-box of the current element itself, but in FireFox it contains the border-box of descendants.

<style type="text/css">
  .outline{
    width: 13px;
    height: 13px;
    outline: 1px solid red;
  }
</style>
<div class="outline"></div>
<script type="text/javascript">
  const el = document.querySelector(".outline") el.textContent = !! ~navigator.appVersion.indexOf("Chrome")?"Chrome" : "FireFox"
</script>
Copy the code

conclusion

Respect the original, reproduced please indicate from: www.cnblogs.com/fsjohnhuang… ^_^ fat John

reference

www.xuebuyuan.com/757567.html www.zhangxinxu.com/wordpress/2…