Wie eine gemeinsame Grenze mit einem Schatten schaffen und eine transparente Füllung der Schatten erscheinen lassen

Question

Ich versuche verzweifelt diesen Knopf-Code:

Kann mir jemand helfen? Vielen Dank.

Ich habe versucht, einen einfachen Knopf mit box-shadow, eine Grenze und einen transparenten Hintergrund zu machen, scheint aber unmöglich.

So können Sie in diesem anderen Codepen sehen, dass eine andere Annäherung mit einem :after und :before versuchte, aber nichts scheint zu funktionieren.

Answer 1

Der beste Weg, den ich gefunden habe, ist ein Pseudo-Element zu verwenden und den unscharfen Rahmen darauf anzuwenden.

.border-shadow { 
    position: relative; 
    display: inline-block; 
    border: 3px solid #F01476; 
    padding: 20px; 
    background-color: transparent; 

    &:after { 
     content: ''; 
     position: absolute; 
     top: 0; 
     right: 0; 
     bottom: 0; 
     left: 0; 
     outline: 3px solid #F01476; 
     filter: blur(2px); 
     transform: translateY(5px); 
    } 
} 

Wenn Sie einen Gradienten Grenze, dann können Sie etwas tun:

.border-shadow { 
    position: relative; 
    display: inline-block; 
    padding: 20px; 
    background-color: transparent; 

    &:after { 
     content: ''; 
     position: absolute; 
     top: -3px; 
     right: -3px; 
     bottom: -3px; 
     left: -3px; 
     filter: blur(2px); 
     transform: translateY(5px); 
    } 

    &, &:after { 
     border-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50' height='50'><defs><linearGradient id='redgradient'><stop offset='0' stop-color='%23F01476'/><stop offset='1' stop-color='%23F3590F'/></linearGradient></defs><g id='Layer_1'><path d='M0,0 L50,0 L50,50 L0,50 L0,0 z' fill='url(%23redgradient)' width='100%' height='100%'/></g></svg>") 10% stretch; 
    } 
} 

See the jsfiddle for both examples in action

Hinweis: Dies ist ohne Präfix CSS, so für die richtige Browser-Unterstützung Sie wollen werden Verwende geeignete Präfixe. Ich empfehle Ihnen, autoprefixer zu verwenden, um dies für Sie, wenn möglich, zu behandeln.