Home > Web Front-end > CSS Tutorial > Analysis of outline in css (with examples)

Analysis of outline in css (with examples)

不言
Release: 2018-10-12 17:04:16
forward
4318 people have browsed it

The content of this article is about the analysis of outline in CSS (with examples). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

In the implementation of css method of changing the color of the radio button box we want to simulate the effect of the native radio button box gaining focus through the Tab key. This involves an attribute that is often ignored. ——Outline, since the previous impression of it was indeed a bit vague, this article intends to conduct a slightly in-depth study of it^_^

Spec describes it like this

Function

Used to create the outline of visual objects (border-box of elements), such as form button outlines, etc.

Different from border

1. Outline does not occupy document space;

2. Outline is not necessarily a rectangle.

Specific attribute description

/* 轮廓线颜色 
 * invert表示为颜色反转,即使轮廓在不同的背景颜色中都可见 
 */
outline-color: invert | <color_name> | <hex_number> | <rgb_number> | inherit
/* 轮廓线样式 */
outline-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit
/* 轮廓线宽度 */
outline-width: medium | thin | thick | <length> | inherit
/* 一次性设置轮廓线的颜色、样式 和 宽度 */
outline: <outline-color> <outline-style> <outline-width>;
/* 轮廓线的偏移量,大于0则轮廓扩大,小于0则轮廓缩小 */
outline-offset: 0px;</outline-width></outline-style></outline-color></length></rgb_number></hex_number></color_name>
Copy after login

The devil is in the details

Compatibility

Outline is a CSS2.1 specification, so IE6/7 /8(Q) is not supported. Writing the correct DOCTYPE under IE8 supports the outline attribute.
Outline-offset is not supported in IE.

Hide outline under IE6/7/8(Q)

To hide the outline effect under IE6/7/8(Q), just add the hideFocus attribute to the element.

The difference between outline:0 and outline:none

Execute the following code under Chrome

<style>
 .outline0{
   outline: 0;
 }
 .outline-none{
   outline: none;
 }
</style>
<a>outline: 0</a>
<a>outline: none</a>
<script>
  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 after login

Result:

.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 after login

outline is only for setting single or multiple A specific outline attribute only provides a more convenient API, so outline:0 and outline:none have essentially the same effect.

I really can’t make rounded corners

Since we have border-radius, we can use CSS to create rounded rectangles, circles and other graphics, and even even Box-shadow is also affected by border-radius to achieve the effect of element shadows and rounded corners. So can outline also create rounded corners? the answer is negative. That's because the function of outline is to outline the space occupied by the element. Although the graphic visual rounding is achieved through border-radius, the position and space occupied by the element has not changed at all, and it is still angular. Angular square.

<style>
  .round{
    width: 100px;
    height: 100px;
    background: yellow;
    border-radius: 50%;
    outline: solid 1px red;
  }
</style>
Copy after login

Analysis of outline in css (with examples)

Differences in outline

Under Chrome, outline is limited to identifying the area occupied by the current element itself. Position space (border-box), but under FireFox it includes the position space occupied by descendant elements.

<style>
  .outline{
    width: 13px;
    height: 13px;
    outline: 1px solid red;
  }
</style>
<p></p>
<script>
  const el = document.querySelector(".outline")
  el.textContent = !!~navigator.appVersion.indexOf("Chrome") ? "Chrome" : "FireFox"
</script>
Copy after login

Analysis of outline in css (with examples)

The above is the detailed content of Analysis of outline in css (with examples). For more information, please follow other related articles on the PHP Chinese website!

Related labels:
css
source:segmentfault.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template