A recent visual script has a bubble on it with a small triangle on it. I’m not going to be a problem with this one. I just hit a div with my hand and add a fake element ::after to set the absolute position, then transform: Rotate (0, 0, 0,.3); rotate(0, 0, 0,.3); rotate(0, 0, 0,.3); rotate(0, 0, 0,.3); rotate(0, 0, 0,.3); , and then add a border triangle to muddle through

.box-shadow {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 50px auto;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 0 5px rgba(0.0.0.3);
  padding: 20px;
}
.box-shadow::before{
  content: ' ';
  position: absolute;
  width: 14px;
  height: 14px;
  transform: rotate(45deg);
  top: -7px;
  left: 50px;
  background: #ffffff;
  border-top: 1px solid rgba(0.0.0.3);
  border-left: 1px solid rgba(0.0.0.3);
}
Copy the code

As a result, the visual eye immediately sees that you can’t do this, the border is too obvious, then try adding a shadow

The shadow below the block how to set up, lost in thought. At this time, my colleague patted my shoulder and said to me that you this is useless, I this is useful, I saw him is a whip, two whips, three whips, more than two minutes later to write.

I looked at it and said, oh, it was written in a drop-shadow

.drop-shadow{
  position: relative;
  width: 200px;
  height: 200px;
  margin: 50px auto;
  border-radius: 12px;
  background: #ffffff;
  filter: drop-shadow(0 0 5px rgba(0.0.0.3));
  padding: 20px;
}
.drop-shadow::before{
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-bottom-color: #ffffff;
  top: -20px;
  left: 50px;
}
Copy the code

The difference between a box-shadow and a drop-shadow is obvious. A box-shadow is the shadow of a box, it is just the shadow of the box, normally you will not find anything, but if the box is transparent inside, the box shadow will still not penetrate. Drop-shadow is the real world projection. Only the non-transparent color will have the projection, and the transparent color will be directly cast. We will remove the background color of the top two boxes

Learned, learned, today’s fish work did not do in vain.