Saya perlu membuat kotak dengan bayang sebaris, sama seperti CSS3 mempunyai bayangan kotak sebaris. Apa yang saya temui setakat ini ialah penapis dengan feGaussianBlur, tetapi masalahnya ialah ia juga menambah bayang di luar kotak, yang saya tidak mahu. Ini kod yang saya ada setakat ini:
Saya membuat demo dan membandingkan kod ini dengan hasil pengeluaran CSS yang diingini. Penapis ini berfungsi bukan sahaja pada segi empat tepat, tetapi juga pada trapezoid dan poligon yang lebih kompleks.
Saya telah mencuba menggunakan RadialGradient, tetapi itu juga tidak bagus kerana ia menjadikan kecerunan bulat.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Kebanyakannya berdasarkanpercubaan yang saya temui, inilah yang saya hasilkan:
Nyahkomen yang terakhir jika anda ingin melihat padding
fill="transparent"tidak akan memberikan penapis alpha yang boleh digunakan, dan ia tidak akan menghasilkan bayang.Jika anda mempunyai padding padat, anda boleh menambah
Di penghujung penapis, ia akan menjepit kabur mengikut bentuk SourceGraphic. Oleh kerana bentuk anda telus, anda perlu melakukan lebih banyak kerja. Saya mengesyorkan menggunakan isian separa lutsinar pada bentuk asal supaya anda mendapat pemilihan gubahan yang betul, dan menggunakan feFuncA untuk menyifarkan isian untuk operasi akhir. Ini ternyata sangat rumit. Tetapi inilah penyelesaian yang sesuai untuk sebarang bentuk garisan pepejal
Ini cabang biola saya:http://jsfiddle.net/kkPM4/