Rounded rectangle with gradual change of border realized by pure css

problem description

how to implement the following graphics in pure css:

  1. Border gradient
  2. there are inner and outer shadows
  3. background gradient

clipboard.png

Supplementary split Lines

my heart is so tired that I have been trampled on. I guess I am regarded as an outstretched party. I will mention my plan. The crux of the problem is that the combination of fillet trapezoid, gradient frame and inner and outer shadow can be realized. I just feel that the transition part is not very good. I want to see if there is a better solution

.

https://codepen.io/roderic/pe.

Nov.10,2021

Inner and outer shadows box-shadow
background gradient background-image linear-gradient


use the c3 transition attribute to slowly adjust

Menu