10 You-need-to-know-css

Transparent border

By default, the background color will extend to the lower border, if the border is set to the transparent color, the background color will be overwritten.

CSS3 property may be provided to background-clipset the background elements (background image or color) is extended to the border below.

background-clipThere are four values:

border-box: Background border extends to the outer edge (but lower in the frame)
padding-box: Background extends into the margin ( padding) the outer edge, does not draw the outer border
content-box: Background extends to the content area ( content box) outer edge
text: Background cut foreground color of the text. (Only supports Chrome, need to add -webkit-the prefix)

[Image dump outer link failure (IMG-pu6KRalK-1562037048483) ( http://image.oldzhou.cn/FpKGstS3QYG5aEbxFSCWYfrP7VlE )]

So it will background-clipset padding-boxyou can achieve transparent border.

Reference :

Multiple Borders

`box-shadow`

box-shadowUsed to generate a shadow effect, if only two values are given, the browser resolves to xthe direction shift amount and ydirection of shift amount; if the third value is given, will be interpreted as the size of the blur radius; if given first four values, will be the size of unexpanded radius supervisor.

The other two properties are insetproperties (declarative) and color values.

Some have been confused and extend the radius of the blur radius, from the following example to understand box-shadowthe generation process

First, define the box-shadowattributes:

.box {
  width: 300px;
  height: 200px;
  background-color: yellowgreen;
  box-shadow: 30px 50px 20px #000;
}

(1) First, boxgenerating a same element of boxexactly the same size, the shape of the shadow, the color of the color set#000

[Image dump outer link failure (IMG-pqy7g5HK-1562037048484) ( http://image.oldzhou.cn/FsV6IWhYI7_Q1bgL6TF7OHma9E0Z )]

At this time, in the shadow of the upper element

(2) offset-xand offset-ythe shadow moves from the upper right 30px, upward movement of50px

[Image dump outer link failure (IMG-EYFnAjdJ-1562037048485) ( http://image.oldzhou.cn/FrF8Xmp5uh3UukOsaYQiaLaG9vwo )]

(3) Then according to the set 20pxblur radius, then the four directions, each direction of the edge of the shadow as the center to both sides of the extended 10pxarea, as Gaussian blur radius

To the right side, for example:

[Image dump outer link failure (IMG-bRtoz8pd-1562037048485) ( http://image.oldzhou.cn/FkPYqMg8GKKPhsJ9sajTyZhABVEw )]

(4) a final step, the shadow region overlapping the element trimmed, as shown below:

[Image dump outer link failure (IMG-esz3KX4c-1562037048486) ( http://image.oldzhou.cn/FtG6m6JEX1SUeZn6p7SgdTuJpcvq )]

(5) to give the final results:

[Image dump outer link failure (IMG-hKXzzU4B-1562037048486) ( http://image.oldzhou.cn/Fo2YmjK0hJYLXI_R1LH5Ll4iZXE7 )]

Seen from the above example, the blur radius is centered on the edge of the shadow is, half extended to both sides, as a radius, Gaussian blur. It will only be positive.

Extension radius, the shadow area is increased, the value of it 0, the shaded area is equal to the area of the element, it is not equal 0, the value is to increase or decrease the size of the four directions

.inner {
  box-shadow: 30px 50px 0 30px #000;
}

[Image dump outer link failure (IMG-Ppfktf4U-1,562,037,048,487) ( http://image.oldzhou.cn/Fn4GZlUhMnmHGxpUWPlUJd0Xx6Q9 )]

FIG broken line is to increase the size of the radius of expansion 30px, when set extended radius, also fuzzy blur radius increases from the shadow of the edge on both sides.

Can be x-offset, y-offsetblur radius are set 0, set the extended radius of different sizes to achieve multiple effects of the border:

.inner {
  box-shadow: 0 0 0 5px darkgoldenrod, 0 0 0 10px darkolivegreen, 0 0 0 15px red;
}

[Image dump outer link failure (IMG-jotaSTcN-1,562,037,048,487) ( http://image.oldzhou.cn/FswhNgLNUD7PxJLo2woa0kCXqvXa )]

The advantage is very easy to achieve the above frame 2, and may be rounded corners, the border can not be achieved disadvantage of non-solid lines.

`outline` + `outline-offset`

outlineOr may be provided a plurality of individual profile or attributes, the profile does not occupy the space ( box-shadowand borderoccupy space)

outline-offsetIt used to set a outlinegap or a border edge element

The combination of both, you can achieve a variety of borders, and can be implemented box-shadow, non-solid line can not be achieved multiple border

.inner2 {
  border: aqua dotted 5px;
  outline: red dotted 5px;
  outline-offset: -15px;
}

[Image dump outer link failure (IMG-mvqWlB43-1562037048488) ( http://image.oldzhou.cn/FrXgZTN2joXiIvqj7YStdIl2XUA2 )]

Advantage of this is a non-solid lines border, to achieve the above disadvantage is inconvenient to frame 2, and can not be rounded corners.

reference

In the border fillet

To achieve the effect of:

[Image dump in the chain ... (img-bMQGre0c-1562037055161)]

No peripheral border fillet, internal rounded, so alone border-radiusis not enough. A portion of the content, we can see, box-shadowit is to follow the border rounded corners, and outlineis not rounded, so we can use the combination of the three to achieve within the borders rounded corners.

Using a border-radiusset fillet, assumed r, but not set border, setting outlineis wsuch that the outer frame is not rounded,

.inner {
  background: darkgray;
  border-radius: 5px;
  outline: 5px solid darkgreen;
}

This time the effect is:

[Image dump in the chain ... (img-lv4PgCjz-1562037055161)]

BACKGROUND due border-radiusprovided appear rounded, then we use box-shadowthese complement portion, provided only its expanded radius, color and outlinesame color

.inner {
  background: darkgray;
  border-radius: 5px;
  outline: 5px solid darkgreen;
  box-shadow: 0 0 0 5px darkgreen;
}

Extended range of radius below:

[Image dump in the chain ... (img-xsjIiF4B-1562037055162)]

Review the value of the extended radius of:

[Image dump in the chain ... (img-QgbGvjxM-1562037055163)]

So this value can not exceed the maximum outlinewidth wand the minimum width can not be less than the Pythagorean theorem $\sqrt{2}r - r$ , i.e. $\sqrt{2-1}r$ , on our setup, radius range is extended[5, 2.07]

Reference :

In the border fillet @ You-need-to-know-css