box

  • Box model definition refer to the article: zhuanlan.zhihu.com/p/291489867
  • The inside of the box

Box-sizing: content-box/border-box content: content area padding: inside margin border: border

  • Box outside

Margin: the outer margin

Content-box (Standard box model)

  • boxWidth = width + border2 + padding2
    • Width == contentWidth

Border-box (Weird box model)

  • boxWidth = width
    • Width is the overall width of the box
    • contentWidth = width – border2 – padding2

Applicable scenario

  • The data in the backend response fixes the size of the box
  • The contentWidth is not fixed, but the padding is
  • Input box, the product manager gives the box size

box-shadow

How to use

  • parameter

[inset] Horizontal shadow offset Vertical shadow offset Gaussian blur (spread) Shadow color

  • Inner shadow expands inward (inset) and outer shadow expands outward
  • Xoffset > 0: right shift
  • Yoffset > 0: move down
  • Spread extends to four weeks, blur is spread as the boundary to blur (the larger the value is, the more blurred and the larger the range is)

  • The shadow who writes first, the closer its z axis is to us
  • Overlap will add color discoloration
  • The background color is below the shadow and the text is above the shadow
<div class="box">center</div>
Copy the code
.box {
  margin: 100px auto;
  width: 100px;
  height: 100px;
  font-size: 20px;
  color: #fff;

  box-shadow: inset 0 0 10px 30px grey,
              150px 70px 10px 0 #f0f.100px 100px 10px 0 #0ff;
}
Copy the code

Example

Cool circle (Inner shadow and outer shadow multiple times)

Sun (Enlarged shadow with Gaussian blur)

text-shadow

How to Use

  • parameter

x y blur ShadowColor

Example

Anaglyph effect

  • White shadow on the top left, black shadow on the bottom right
    • It gives the impression that the shadow is on the back right

Carve the effect

  • Black shadow on the top left, white shadow on the bottom right
    • It gives the impression that the shadow is behind the left

Flame effect

  • Hover to add text by pseudo-element, replace shadow, and show pseudo-element added text

body {
  background-color: black;
}

.box {
  width: 400px;
  height: 100px;
  font-size: 40px;
  color: #fff;

  position: absolute;
  left: calc(50% - 200px);
  top: calc(50% - 50px);
  text-shadow: 0 0 10px #0f0.0 0 20px #0f0.0 0 30px #0f0;
  transition: 0.6 s;
}
div:hover {
  text-shadow: 0 0 10px #f00.0 0 20px #f10.0 0 30px #f20;
}
div::before {
  content: "NO ";
  opacity: 0;
  transition: 0.6 s;
}
div:hover::before {
  opacity: 1;
}
Copy the code

A god of death to the

  • When background-clip and text-shadow are used together,
    • Because background-clip: text is used, the text is changed to be part of the background, so the text shadow is closer to us
    • Use the background image

Shadow copy

Hover is actually a crazy text-shadow

Effect of stroke

-webkit-text-stroke: Stroke size stroke color

.box {
  font-size: 60px;
  font-weight: bold;
  color: transparent;
  -webkit-text-stroke: 2px red;
}
Copy the code

@font-face

Chinese font package is too large, generally not imported from the introduction of small font package

The MINE protocol is the bridge between Browser and Operation System

  • Browser has the built-in MINE protocol, which may vary from Browser to Browser
    • It is therefore best to introduce the same font file with all the different suffixes to prevent browser incompatibilities