상자 그림자 CSS 속성, 그림자 효과를 효과적으로 생성하는 방법은 무엇입니까?

Question

나는 웹 디자인을위한 드롭 섀도우 효과 기술에 대해 연구 해왔다. 그래서, 내 웹 사이트에 최상위 머리글 표시 줄을 구현하는 기술을 적용하고 싶습니다.

내 연구 결과에 따르면 사람들이 가장 많이 사용하는 것은 box-shadow CSS 속성입니다. 이것이 원하는 결과를 얻는 가장 효과적이면서도 간단한 방법인지 알고 싶습니다. 다른 옵션을 사용하여 동일한 요소와 장단점을 구현할 수 있습니까?

모든 조언을 주시면 감사하겠습니다.

Answer 1

가장 간단한 방법은 그렇지 않은 :

포토샵, 읽어 : http://www.css3.info/preview/box-shadow/

box-shadow는, 따라서 고유의 접두사 대부분의 브라우저에서 기본적으로 사용할 수는 < IE9에서 사용할 수없는 의미하는 CSS3의 속성입니다, 그리고 : IE의 그림자에 대한

샘플 CSS 코드 :

filter:progid:DXImageTransform.Microsoft.Shadow(color='#000000',direction='120',strength='20'); 

CSS3를했습니다 rsion :

element { 
    -moz-box-shadow: 10px 10px 5px #888; 
    -webkit-box-shadow: 10px 10px 5px #888; 
    -o-box-shadow: 10px 10px 5px #888; 
    -khtml-box-shadow: 10px 10px 5px #888; 
    box-shadow: 10px 10px 5px #888; 
} 

Answer 2

CSS3 상자 그림자 속성의 유일한 다른 옵션은 이미지를 사용하는 것입니다. CSS3 상자 그림자는 적용하기가 쉽고 사용하기에 더 적은 페이지 무게 (kb)가 필요합니다. 그러나 모든 브라우저가 CSS3 상자 그림자를 지원하지는 않습니다.

박스 섀도우 속성을 사용하는 경우 브라우저별로 다양한 속성을 모두 설정해야합니다.

box-shadow: 1px 2px 3px #000; 
-moz-box-shadow: 1px 2px 3px #000; 
-webkit-box-shadow: 1px 2px 3px #000; 
-o-box-shadow: 1px 2px 3px #000; 
-khtml-box-shadow: 1px 2px 3px #000;