발광을 위해 -webkit-radial-gradient 사용

사용자 정의 버튼에 호버 글로우를 구현하려고합니다 (아래 그림 참조). Chrome에서 재생 중이며 -webkit-radial-gradient로 비슷한 모양을 얻을 수 없습니다. enter image description here 발광을 위해 -webkit-radial-gradient 사용

<html> 
    <head> 
    <style type="text/css"> 
     button { 
     margin-top: 20px; 
     width: 100px; 
     height: 32px; 
     border-style: solid; 
     border-width: 1px; 
     border-radius: 5px 5px 5px 5px; 
     border-color:#D95D00; 
     box-shadow: 0 0 4px #F3BB35 inset; 
     background: -webkit-gradient(linear, left bottom, left top, from(#D95D00), to(#E6A200)); 
     background: -webkit-gradient(linear, left top, left bottom, from(#FFD266), to(#F28430)); 
     background: -webkit-gradient(linear, left bottom left top, from(#E97F2F), to(#F3BB35)); 
     } 
     button:hover { 
     background: -webkit-gradient(linear, left bottom, left top, from(#D95D00), to(#E6A200)); 
     background: -webkit-gradient(linear, left top, left bottom, from(#FFD266), to(#F28430)); 
     background-image: -webkit-radial-gradient(center, ellipse cover, #FFFFFF, #000); 
     } 
    </style> 
    </head> 
    <body> 
    <button>Hello</button> 
    </body> 
</html>

출처

2012-08-09 Vasya

버튼 자체를 '밝게'하려고하거나 가장자리 주변에 빛나는 테두리를 넣으려고합니까? – PhonicUK

자체를 발광 시키십시오. 그러나이 모든 그라데이션이 나쁜 생각 인 것 같고 글꼴도 매끄럽지 않습니다. – Vasya

문제 때문에 빛나는 테두리가 생기면 box-shadow 속성을 사용할 수 있습니다. – PhonicUK

그것은 선형 그라디언트 꽤 잘 작동합니다. 방사형 그래디언트는 비슷합니다 : dabblet.

background-image (그라디언트)에 크기 (단위)를 지정해야합니다. 그런 다음 다음 속성 중 하나 이상을 변경하십시오.

출처

2012-08-09 11:25:08

발광을 위해 -webkit-radial-gradient 사용

답변

관련 문제