[image] CSS : 이미지 주위에 흰색 광선 만들기

Program / 글쓴이

크기를 알 수없는 이미지의 테두리로 흰색 광선을 만들려면 어떻게해야합니까?

답변

간단한 CSS3 사용 (IE <9에서는 지원되지 않음)

img
{
    box-shadow: 0px 0px 5px #fff;
}

이렇게하면 문서의 모든 이미지 주위에 흰색 광선이 표시되고 더 구체적인 선택기를 사용하여 빛을 내고 싶은 이미지를 선택합니다. 물론 색상을 변경할 수 있습니다. 🙂

최신 버전의 브라우저를 사용하지 않는 사용자가 걱정된다면 다음을 사용하세요. 

img
{
-moz-box-shadow: 0 0 5px #fff;
-webkit-box-shadow: 0 0 5px #fff;
box-shadow: 0px 0px 5px #fff;
}

IE의 경우 글로우 필터를 사용할 수 있습니다 (어떤 브라우저에서 지원하는지 확실하지 않음)

img
{
    filter:progid:DXImageTransform.Microsoft.Glow(Color=white,Strength=5);
}

자신에게 맞는 설정을 확인하세요. 🙂

답변

@tamir; 당신은 css3 속성으로 할 수 있습니다.

img{
-webkit-box-shadow: 0px 0px 3px 5px #f2e1f2;
-moz-box-shadow: 0px 0px 3px 5px #f2e1f2;
box-shadow: 0px 0px 3px 5px #f2e1f2;
}

바이올린 http://jsfiddle.net/XUC5q/1/ 확인
및 여기에서 생성 할 수 있습니다 http://css3generator.com/

이전 버전의 IE에서 작동해야하는 경우 CSS3 PIE 를 사용 하여 해당 브라우저에서 상자 그림자를 에뮬레이션 할 수 filter있으며 kyle이 다음과 같이 말한대로 사용할 수 있습니다.

filter:progid:DXImageTransform.Microsoft.Glow(color='red', Strength='5')

여기 http://samples.msdn.microsoft.com/workshop/samples/author/filter/Glow.htm 에서 필터를 생성 할 수 있습니다 .

답변

매력처럼 작동합니다!

.imageClass {
  -webkit-filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));
}

짜잔! 그게 다야! 분명히 이것은 ie에서 작동하지 않을 것입니다.

답변

대상 브라우저가 무엇인지에 따라 다릅니다. 최신 버전에서는 다음 과 같이 간단합니다 .

   -moz-box-shadow: 0 0 5px #fff;
-webkit-box-shadow: 0 0 5px #fff;
        box-shadow: 0 0 5px #fff;

이전 브라우저의 경우, 예를 들어이 예제를 기반 으로 해결 방법을 구현 해야하지만 추가 마크 업이 필요할 것입니다.

답변

여기 파티에 늦었어요 그러나 약간의 재미를 더하고 싶었습니다 ..

box-shadow: 0px 0px 5px rgba(0,0,0,.3);
padding:7px;

이미지에 패딩 처리 된 멋진 모습을 제공합니다. 패딩은 시뮬레이션 된 흰색 테두리 (또는 설정 한 테두리)를 제공합니다. rgba는 특정 색상에 대해 opicity를 할 수 있도록합니다. 0,0,0은 검정색입니다. 다른 RGB 색상을 쉽게 사용할 수 있습니다.

이것이 누군가를 돕기를 바랍니다!

답변

CSS3를 사용하여 이와 같은 효과를 만들 수 있지만 CSS3PIE와 같은 폴리 필을 사용하지 않는 한 박스 그림자를 지원하는 최신 브라우저에서만 볼 수 있습니다 . 예를 들어 다음과 같이 할 수 있습니다. http://jsfiddle.net/cany2/

답변