CSS를 사용하여 이미지에 그림자를 추가하는 방법 소개

일반적으로 배경 이미지를 사용하여 이미지에 그림자를 추가할 수 있지만 고정되지 않은 크기의 이미지에 대해 이를 어떻게 달성할 수 있을까요?

그라데이션 테두리를 정의하여 이를 달성하기 위해 "시각적 속임수 방법"을 사용할 수 있습니다.

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
http://www.w3.org/1999/xhtml ">
<머리>


<제목>
<스타일 유형="텍스트/css" >
본문 {배경:#2e334d;}
img {경계:없음;}
a.pic-shadow {display:inline-block;zoom:1;padding:1px;ground:#262a3f;border:solid #2b3048 1px;border-radius:5px;-moz-border-radius:5px;-webkit- 테두리 반경:5px;}
a.pic-shadow img {패딩:1px;배경:#13151f;border:solid #1e2132 1px;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;}


<본문>
" alt="" title="" />

border-radius:5px;
-moz-국경-반경:5px;
-webkit-border-radius:5px;

위의 정의는 보다 전문적으로 눈을 속이기 위해 다양한 표준 브라우저에서 둥근 모서리를 정의한 것입니다.

색상 코드는 PS에서 외부 광선 효과를 만든 후 선택할 수 있습니다.
위에서 적용한 효과는 [부드러움], [확장 0], [크기 5px], [색상 #000]이고 나머지는 기본값입니다.

물론 특별한 요구 사항이 있는 경우 IE 필터를 사용하여 더 멋진 그림자를 얻을 수 있습니다.