Multiple frames

Basic usage of box-shadow and outline

/ * x offset | y offset | | | fuzzy shadow radius shadow diffusion radius of the shadow color * /Copy the code
box-shadow: 2px 2px 2px 1px rgba(0.0.0.0.2);
Copy the code

These are the basic parameters for box-shadow. Box-shadow is a style that adds a shadow effect to an element. But we can render the border effect by setting its properties.

Box – shadow

The box – shadow single frame

  1. Set the x offset to 0px, and the Y offset to 0px, so that the shadow falls under the element and does not exceed the element itself.
  2. Set the blur to 0px to make the shadow look solid.
  3. When the diffusion radius increases, it can be interpreted as the shadow expands outward.
  4. The shadow now looks like a solid border with the width of the spread radius
box-shadow: 0px 0px 0px 10px rgba(0.0.0.0.6);
Copy the code

The box – more than shadow border

The box-shadow property can be separated by commas to add multiple shadows.

box-shadow: 0px 0px 0px 20px rgba(0.0.0.0.6),
            0px 0px 0px 40px rgba(120.120.120.0.6);
Copy the code

Notice that the shadow isLayer upon layer overlay, the first shadow is at the top, and so on, and the radius of the shadow is elementbordertheThe outer edge is the starting point. So if you want two widths20pxThe shadow of the two shadowsDiffusion radiusYou need to set it separately20px.40px

We need to note that the shadow does not affect the layout of the elements, which we can understand by its literal meaning, shadow, it does not take up any space. And binding events on elements are not triggered on shadows. The effect is shown in figure

Margin Fill space

So if we want the shadow to behave as we expect, we can add the same outer border margin to simulate the space occupied by the shadow.

margin: 40px;
box-shadow: 0px 0px 0px 20px rgba(0.0.0.0.6),
            0px 0px 0px 40px rgba(120.120.120.0.6);
Copy the code

background-clip

Currently, the extension direction of shadows is from the outside edge of the border. It simulates space, but it still doesn’t trigger events on elements. If you want the border to behave like a border on events, you can set the inset property to spread it inwards and use the padding to simulate space.

padding: 40px;
background-color: black;
background-clip: content-box;
box-shadow: 0px 0px 0px 20px rgba(0.0.0.0.6),
            0px 0px 0px 40px rgba(120.120.120.0.6);
Copy the code

Note that the order of the borders is reversed. If the shadow border is set to transparency, you need to pick your own color because it involves transparency color overlay. The same transparency will be penetrated by the background color, if you do not want to be affected by the background color, can be setbackground-clip: content-box;

The outline plan

Outline can implement a two-border scheme, while being more flexible to implement a dashed border. Border and outline are similar, but have the following differences:

  1. Outlines do not take up space (like shadows) and are drawn around element content.
  2. The outline does not necessarily fit the rounded corners.
  3. We can set a negative value with outline-offset to make the outline appear inside the element.

outline First Try

border: 10px solid blue;
outline: 10px solid skyblue;
Copy the code

Don’t take up space

outline Second Try

border: 10px solid blue;
outline: 10px solid skyblue;
border-radius: 20px;
Copy the code

Does not fit round corners

outline Third Try

The effect of the offset property on the hemline

background-color: # 333;
outline: 2px dashed white;
border-radius: 20px;
outline-offset: -30px;
Copy the code

Next up:CSS Revealed: 3. Flexible background positioning