I need to make a box with an inline shadow, just like CSS3 has an inline box shadow. What I've found so far is a filter with feGaussianBlur, but the problem is that it also adds a shadow outside the box, which I don't want. This is the code I've got so far:
I made a demo and compared this code with the desired CSS production result. This filter works not only on rectangles, but also on trapezoids and more complex polygons.
I've tried using RadialGradient, but that's not good either since this makes the gradient circular.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Based mostly onexperiments I found, this is what I came up with:
If you want to see padding, uncomment the last
fill="transparent"does not give the filter a usable alpha, nor does it produce a shadow.If you have solid padding, you can add
Towards the end of the filter, it will clip the blur to the shape of the SourceGraphic. Since your shape is transparent, you need to do more work. I recommend using a semi-transparent fill on the original shape so you get the correct composition selection, and using feFuncA to zero out the fill for the final operation. This turns out to be very complicated. But here is a solution that works for any solid line shape
This is my fiddle branch:http://jsfiddle.net/kkPM4/