Small knowledge, big challenge! This paper is participating in theEssentials for programmers”Creative activities.

The problem

One day, the lovely design sister brought a design draft, said this small frame I want to make it like this ~

You don’t know what to do with this hollow shadow…

To solve

All of a sudden ~! You figured it out. It’s a box-shadow

Let’s start with a box

body {
  background-color: # 000;
}
div {
  width: 100px;
  height: 100px;
  border: 1px solid #cc33ee;
  border-radius: 5px;
}
Copy the code

So we’ve got the first box, and now we’re going to shadow it

Recall the use of box-shadow

Go straight to a complex box-shadow

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

As can be seen from the MDN example, the parameters of box-shadow are: X offset, Y offset, shadow blur radius, shadow diffusion radius, and shadow color

As we will soon see, the hollow shadow effect we want to achieve cannot be achieved with a single shadow, but can be achieved with two shadows superimposed. Let’s take a look at the MDN example:

box-shadow: 3px 3px red, -1em 0 .4em olive;
Copy the code

Two shadows are defined here, a red shadow with an x and y offset of 3px, and a fuzzy olive green shadow with a negative offset

implementation

So we’re thinking, well, if we put the two shadows in the same direction, is that enough? Yes!

body {
  background-color: # 000;
}
div {
  width: 100px;
  height: 100px;
  border: 1px solid #cc33ee;
  border-radius: 5px;
  box-shadow: 7px 7px # 000.7px 7px 0 1px #ffee44;
}
Copy the code

The first is 7px 7px #000, which is the same as the background color and blocks the middle part. Sketched the location of the black shadows.

And then the7px 7px 0 1px #ffee44The offset is also 7px, but it increases the diffusion radius by 1px, and there is no blur radius, so it will be based on 7pxSpread out by 1pxAnd the color is #ffee44

When added together, the black shadow overlays the yellow shadow, resulting in a yellow border

reference

Developer.mozilla.org/zh-CN/docs/…

That’s all for this article. Please feel free to like it