어떻게 그림자와 그림자가 나타날 수 있도록 투명한 채우기와 테두리를 만들

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을 사용하는 것이 좋습니다.