どのように影が私は必死にこのボタンをコーディングしようとしています

Question

を表示させるために、影との国境と透明の塗りつぶしを作成します。

誰も私を助けてもらえますか？ありがとう。

私はbox-shadowと簡単なボタン、境界線と透明な背景を作ってみましたが、不可能です。

この他のコードでは、:afterと:beforeという別のコードを試しましたが、何も動作しないようです。

Answer 1

私はこれを行うために見つけた最良の方法は、擬似要素を使用し、その上でぼやけた境界線を適用することです。

.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); 
    } 
} 

あなたは国境勾配が、あなたはこのような何かを行うことができますしたい場合：

.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

注：適切なブラウザのサポートのためにあなたがしたいと思うので、これは、接頭辞CSSです適切なプレフィックスを適用します。可能であれば、これを処理するためにautoprefixerを使用することをお勧めします。