如何創建一個陰影和透明填充，讓陰影出現的邊框

Question

我拼命試圖代碼按鈕：

任何人可以幫助我嗎？謝謝。

我試圖做一個簡單的按鈕box-shadow，一個邊框和透明背景，但似乎不可能。

所以你可以看到在這個其他codepen一個嘗試和其他: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來處理這個問題。