CSS로 그림자 효과 설정

<시간/>

Drop Shadow는 지정된 X(수평) 및 Y(수직) 오프셋 및 색상에서 개체의 그림자를 만드는 데 사용됩니다.

이 필터에는 다음 매개변수를 사용할 수 있습니다.

매개변수	설명
색상	그림자의 색상(#RRGGBB 형식).
오프X	그림자가 x축을 따라 시각적 개체에서 오프셋되는 픽셀 수입니다. 양의 정수는 그림자를 오른쪽으로 이동하고 음의 정수는 그림자를 왼쪽으로 이동합니다.
오프Y	그림자는 y축을 따라 시각적 개체에서 오프셋된 픽셀 수입니다. 양의 정수는 그림자를 아래로 이동하고 음의 정수는 그림자를 위로 이동합니다.
양수	참이면 개체의 모든 불투명 픽셀에 그림자가 생깁니다. false이면 모든 투명 픽셀에 그림자가 생깁니다. 기본값은 true입니다.

예시

다음 코드를 실행하여 그림자 효과를 설정할 수 있습니다.

<html>
   <head></head>
   <body>
      <img src = "/css/images/logo.png"
         alt = "CSS Logo"
         style = "Filter: Chroma(Color = #000000)
         DropShadow(Color = #FF0000,
         OffX = 2,
         OffY = 2, Positive = 1)">
      <p>Text Example:</p>
      <div style = "width: 357;
         height: 50;
         font-size: 30pt;
         font-family: Arial Black;
         color: red;
         Filter: DropShadow(Color = #000000, OffX = 2, OffY = 2, Positive = 1)">CSS Tutorials</div>
   </body>
</html>