>  기사  >  웹 프론트엔드  >  CSS를 사용하여 그림자 효과 설정

CSS를 사용하여 그림자 효과 설정

WBOY
WBOY앞으로
2023-09-01 18:33:021158검색

使用 CSS 设置阴影效果

Drop Shadow는 지정된 X(가로) 및 Y(세로) 오프셋과 색상으로 개체의 그림자를 만듭니다.

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

Parameters

Description

Color

Color, #RRGGBB 형식, Shade.

offX

투영이 X축을 따라 시각적 객체로부터 오프셋되는 픽셀 수입니다. 양의 정수는 투영을 오른쪽으로 이동하고, 음의 정수는 투영을 왼쪽으로 이동합니다.

offY

Y축을 따라 시각적 개체에서 그림자가 오프셋되는 픽셀 수입니다. 양의 정수는 그림자를 아래쪽으로 이동하고, 음의 정수는 그림자를 위쪽으로 이동합니다.

긍정적

true이면 개체의 모든 불투명 픽셀에 그림자가 있습니다. false인 경우 모든 투명 픽셀에 그림자가 있습니다. 기본값은 true입니다.

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

Live Demo

<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>

위 내용은 CSS를 사용하여 그림자 효과 설정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 tutorialspoint.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제