CSS로 상자 그림자를 구축하는 가장 효과적인 방법

Question

CSS로 상자 그림자를 만드는 방법이 가장 효과적입니다. 그러나 나는 구현의 용이성, 유연성 및 크로스 브라우저 호환성의 용이성입니다.

Answer 1

양파 스키닝은 제가 개인적으로 가장 좋아하는 것입니다.

이것에서 예를 찾을 수 있습니다 Alistapart 기사.

Answer 2

이제는 달성하기가 매우 간단합니다.

box-shadow: 3px 3px 3px rgba(0,0,0,0.33);

첫 번째 값은 수평 오프셋입니다. 두 번째 값은 수직 오프셋입니다. 세 번째 값은 흐림 효과의 확산입니다. 네 번째 값은 색상입니다.

또한 다른 값을 추가 할 수 있습니다 inset, 이것은 그림자가 당신의 내부에 표시되게합니다. 블록 요소 :

box-shadow: 3px 3px 3px rgba(0,0,0,0.33) inset;

이것은 이제 매우 잘 지원됩니다. https://caniuse.com/#feat=css-boxshadow

Answer 3

내가 현재 가장 효과적인 방법은 다음과 같습니다.

필요한 CSS 규칙 :

    .shadow{
      position:relative;
      display:block;
      background-color:#bbb;
      border:1px solid black;
    }

    .shadowed_item{
        position:relative;
        border:1px solid black;
        background-color:white;
        top:-5px;
        left:-5px;
    }

CSS가 적용되는 HTML 코드 :

<div class='shadow'>
    <div class='shadowed_item'>I have a shadow.</div>
</div>

구현하기가 매우 간단하고 유연하며 FF 3 (IE 6 & 7)에서 동일하게 작동합니다.