CSS3의 새로운 기능 개요: CSS3를 사용하여 그림자 효과를 얻는 방법

CSS3의 새로운 기능 개요: CSS3를 사용하여 그림자 효과를 얻는 방법

소개:
CSS3의 지속적인 개발로 현대 웹 디자이너는 이전에는 순수 CSS를 통해 이미지 기술을 통해서만 가능했던 효과를 쉽게 얻을 수 있습니다. . 그 중 하나가 그림자 효과입니다. 이 기사에서는 CSS3의 그림자 속성을 소개하고 CSS3를 사용하여 그림자 효과를 얻는 데 도움이 되는 코드 예제를 제공합니다.

CSS3 그림자 속성:
CSS3의 box-shadow 속성을 사용하면 HTML 요소에 그림자 효과를 추가할 수 있습니다. 이 속성을 사용하면 그림자의 오프셋, 흐림, 확산 및 색상을 지정할 수 있습니다. 다음은 box-shadow 속성의 구문입니다.

box-shadow: h-shadow v-shadow 흐림 확산 색상

여기서:

• h-shadow는 그림자의 수평 오프셋을 지정합니다. 음수 값
• v-shadow는 음수 값일 수 있는 그림자의 수직 오프셋을 지정합니다.
• blur는 그림자의 흐림 정도를 지정하며,
• spread는 그림자의 확장 정도를 지정합니다. 0일 수 있습니다.
• color는 그림자의 색상을 지정하며 다양한 색상 표현 방법을 지원합니다.

예제 1: 기본 그림자 효과
다음 예에서는 CSS3의 box-shadow 속성을 통해 기본 그림자 효과를 추가하는 방법을 보여줍니다.

<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: #f5f5f5;
        box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
    }
</style>

<div class="box">
    这是一个带有阴影的盒子
</div>

위의 예에서는 .box 요소에 box-shadow 속성을 추가하여 기본적인 그림자 효과를 얻었습니다. . 그림자의 가로 및 세로 오프셋은 0, 흐림 효과는 10px, 스프레드는 5px, 색상은 rgba(0, 0, 0, 0.3)입니다.

예 2: 여러 그림자 효과
box-shadow 속성은 요소에 여러 그림자 효과 추가도 지원합니다. 다음 예에서는 CSS3 box-shadow 속성을 통해 다중 그림자 효과를 추가하는 방법을 보여줍니다.

<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: #f5f5f5;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3),
                    0px 0px 5px rgba(0, 0, 0, 0.5);
    }
</style>

<div class="box">
    这是一个带有多重阴影的盒子
</div>