I’m participating in nuggets Creators Camp # 4, click here to learn more and learn together!

preface

The CSS shadow effect is a CSS property that we use a lot, but have you looked into it closely? Do you copy it directly from the Blue Lake when using it? Do you understand every parameter of it? What nice things can you do with shadows? Take a look at my summary of CSS shadow knowledge, it may not be comprehensive, welcome to add.

Attribute is introduced

grammar

box-shadow: x-shadow y-shadow blur spread color inset;
Copy the code

X-shadow: The required offset of the horizontal shadow, which can be negative. The figure below shows how x-shadow behaves in different cases with the same other parameters

box-shadow: x-shadow 0 10px 10px rgba(0, 0, 0, .2);

Y-shadow: The required offset of the horizontal shadow, which can be negative. The following figure shows how y-shadow behaves in different cases with the same other parameters

box-shadow: 0 y-shadow 10px 10px rgba(0, 0, 0, .2);

Blur: Optional, blur distance, does not support negative numbers, the figure below shows the different performance of blur under the same other parameters

box-shadow: 0 0 blur 10px rgba(0, 0, 0, .2);

spread: Optional, radius of the expansion of the shadow, the shadow of the principle is actually a copy the current element, this property is to control the replication of the radius of the element, be sure to remember good ah, support negative, if negative, copy the elements would be smaller than the original elements, below expressed in other parameters are the same, spread the different performance under different conditions

box-shadow: 0 0 10px spread rgba(0, 0, 0, .2);

Color: an optional color value that supports #000000 or RGB (0,0,0) or rgba(0,0,0,.2)

box-shadow: 0 0 10px 10px color;

Inset: Optional, inner shadow. Below is the effect with this parameter

box-shadow: 0 0 10px 5px rgba(0, 0, 0, .5) inset;

Multiple shadows

Css3 shadows support multiple shadows, as long as each shadow attribute is separated by a comma

.box15 {
  border-radius: 50%;
  box-shadow: 
    -20px 0 20px 5px rgba(213.255.145.0.5),
    0px -20px 20px 5px rgba(145.255.191.0.5),
    20px 0 20px 5px rgba(82.255.220.0.5),
    0 20px 20px 5px rgba(239.255.91.0.5);
}
Copy the code

The above is a detailed introduction and display of CSS shadow properties

Creative usage

Soft edge

One of the great things about CSS shadows is that they soften the edges and make them look less stiff. For example, they can be used to create light and shadow images or small animations. Here’s how to use CSS to draw the moon in the night sky

3 d effect

Adding a little shadow to a two-dimensional plane can create a three-dimensional effect, which is also used by many websites, such as the official website of Xiaomi

We can even use it to make a three-dimensional button

.box19 {
  width: 100px;
  height: 30px;
  background: #89d444;
  line-height: 30px;
  color: #fff;
  user-select: none;
  box-shadow: 0px 8px 0 0 #479a48.0 10px 5px 0 rgba(0.0.0.5);
  border-radius: 5px;
  transform: translateY(-8px);
}
.box19:active {
  transform: translateY(0);
  box-shadow: 0 0
}
Copy the code

Drawing a picture

Yes, you read that right, you can even draw a painting with CSS’s multiple shadow properties, which almost no one does, but it’s almost impossible to say that a certain god drew a Mona Lisa with CSS shadow effects

This is the address codepen. IO/Jaysalvat /p…

Transition effects

According to the test, box-shadow supports transion transition effect

I messed with the rest of it myself

As for how to use this to make a better look at the effect, see you big guy play, this article here, this article published to the public number 100 Li Castle peak, reproduced please first consent