I have done a lot of special layout before, such as in these two articles, the CSS implementation coupon tips (juejin. Cn), CSS implementation support gradient tooltips (Juejin. Cn), below

But there has always been one pain point: the inability to attach borders to these shapes

Today’s tip: Use drop-shadow to fix all irregular borders in a single line of code

A, projection

If you don’t know much about this, you can refer to the article “Under-rated CSS filters: Drop-shadow” for a brief introduction

The grammar is simple

filter: drop-shadow(offset-x offset-y blur-radius color)
Copy the code

Not a single attribute, but a method under the filter filter

Offset -x, offset-y, blur-radius, color The effect is to simulate the projection of the real world (transparent parts do not projection). The difference is as follows

Unfortunately, it is similar to box-shadow, but without the extension radius. Imagine if you had an extension radius, it would be easier to have irregular borders (it probably won’t, since real world projections don’t have an extension radius either).

How does a drop-shadow generate borders?

Two, multiple projection

Box-shadow makes it easy to implement multiple shadows

box-shadow: 0 0 3px #333, 1px 1px 5px #666, ...
Copy the code

It could add up indefinitely.

Drop-shadow, for example, is not

filter: drop-shadow(0 0 3px #333, 1px 1px 5px #666, ...)
Copy the code

You can see that the browser just says it’s illegal

Drop shadow is not supported, but filter supports multiple filters, so it can be implemented this way

filter: drop-shadow(0 0 3px #333) drop-shadow(0 0 3px #333) drop-shadow(0 0 3px #333)...
Copy the code

So that’s going to work

Is it a little bit like a border? If you only set the blur to 0.5px and overlay it a few times, the blur will become clearer. This will be a bit like a soft brush stroke, and it will become clearer with a few more strokes, so you can get this effect

This will make it closer. In practice, it may need to be fine-tuned. Here is a perfect solution (emphasis comes ~).

.wrap{ filter: Drop -shadow(0px 0px 0.5px #333) drop-shadow(0px 0px 0px #333) drop-shadow(0px 0px 0px #333) drop-shadow(0px 0px 0px #333) drop-shadow(0px 0px 0px #333) drop-shadow(0px 0px 0px #333) drop-shadow(0px 0px 0px #333 #333) drop-shadow(0px 0px 0px #333) }Copy the code

This implementation of the border is clear enough, the basic daily use

By default, the projection color follows the current text color, so it can be simplified to

.wrap{filter: drop-shadow(0 0 0.5px)drop-shadow(0 0 0 0)drop-shadow(0 0 0)drop-shadow(0 0 0)drop-shadow(0 0 0)drop-shadow(0 0 0)drop-shadow(0 0 0)drop-shadow(0 0 0)drop-shadow(0 0 0); color: #333; }Copy the code

The online example is coupon-border, as well as this Tooltips-border

Use and limitations

Simply add this line of CSS to the top of the container, as in the previous coupon example, to get the border effect

And then there’s this

The border is good enough, and the projection is barely visible

However, it is important to note that the mask clipped figure needs to have a parent layer nested in the outer layer, otherwise the shadow will be clipped by the mask directly

<div class="wrap"> <div class="coupon"> <! < div> < div>Copy the code

On the other hand, this scheme works well with smaller frames, but with larger frames, it can be smoother, and requires more filters, so it doesn’t look very good, as shown below

You have to decide what you want to do (usually you don’t have a thick border)

Iv. Summary and explanation

This article introduces a general solution to achieve irregular border, the cost is very low, the effect is very good, here to summarize:

  1. Drop-shadow only casts a shadow on an opaque part, which is consistent with the physical world
  2. Drop-shadow does not support multiple shadows. Filter supports multiple filters, which can indirectly implement multiple shadows
  3. The implementation principle of the border is the projection of multiple superpositions
  4. Some of the images generated by mask clipping need to be wrapped in a layer of containers and regenerated as borders
  5. Suitable for small borders, too large borders are not ideal
  6. Filter is actually a more expensive attribute, not suitable for too wide range of use

Most of you will probably end up with “bit.png”, but it’s a solution, and one more solution is always good. Finally, if you think it’s okay and helpful, please like, favorit, or retweet ❤❤❤