CSS: outline

outline usage and similar border, for example:

.outline {
　　outline: 1px solid #000;
}

Both have similar performance, all elements of the frame to the outside, but the role is not the same.

1. outline is closely related to a property and user experience, with the focus status and keyboard access close.

While visiting a web page, if the mouse is broken, this time we usually use the tab key to continue to focus in order, control elements, including: links, buttons, input boxes and other form elements, or focus tabindex set of common elements, press Shift + Tab key combination to access the reverse direction.

By default, the elements in the browser will focus state by emitting a virtual outer frame or in the form of distinction and tips, the virtual light emitting block is or the outer outline default browser, google below is the effect of the default outline. This outline is very useful, it can prompt the user which element on top of their current focus on, and at this time, press the Enter key is equivalent to clicking this element.

2. outline does not occupy space

outline regardless of the setting is much big, it does not occupy all the space, it can be used to achieve some special effects layout

Rectangular hollow effect (1) head cut, the following is the most simple hollow effect:

<html>
  <head>
    <style>
      .crop {
        overflow: hidden;
        height: 300px;
        width: 300px;
        background: #f00;
      }
      .crop > .crop-area {
        width: 80px; height: 80px;
        outline: 9999px solid rgba(0,0,0,.5);
        cursor: move;
      }
    </style>
  </head>
  <body>
    <div class="crop">
      <div class="crop-area">

      </div>
    </div>
  </body>
</html>

(2) automatically fill the remaining screen space application techniques

Look at the following code to display the contents will remain after the completion of a large blank:

<html>
  <head>
    <style>
      .footer {
         height: 50px;
      }
      .footer > p {
        position: absolute;
        left: 0; right: 0;
        text-align: center;
        padding: 15px 0;
        background-color: #a0b3d6;
        clip: rect(0 9999px 9999px 0);
      }
    </style>
  </head>
  <body>
    <div class="footer">
      <p>test fill</p>
    </div>
  </body>
</html>

But the outline can later be added to fill the screen with the background color:

<html>
  <head>
    <style>
      .footer {
         height: 50px;
      }
      .footer > p {
        position: absolute;
        left: 0; right: 0;
        text-align: center;
        padding: 15px 0;
        background-color: #a0b3d6;
        outline: 9999px solid #a0b3d6;
        clip: rect(0 9999px 9999px 0);
      }
    </style>
  </head>
  <body>
    <div class="footer">
      <p>test fill</p>
    </div>
  </body>
</html>

Now no longer have to worry about the screen height is too high!

Guess you like