CSS3에서 그림자 효과를 얻는 방법-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS3에서 그림자 효과를 얻는 방법

醉折花枝作酒筹

Jul 26, 2021 am 11:00 AM

css그림자 효과

CSS에서는 box-shadow 속성을 사용하여 그림자 효과를 얻을 수 있습니다. "box-shadow: 수평 그림자 위치, 수직 그림자 위치, 흐림 거리, 그림자 크기, 색상 삽입 스타일"만 설정하면 됩니다. 요소. 이 속성은 상자에 하나 이상의 그림자(쉼표로 구분된 그림자 목록)를 추가합니다.

CSS3에서 그림자 효과를 얻는 방법

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

이전에는 거의 사용해 본 적이 없고 이 부분을 잘 이해하지 못했기 때문에 그림자와 애니메이션에 대한 몇 가지 간단한 요구 사항만 구현했습니다. 따라서 이 프로젝트는 실천과 결합되어야 하지만, 이 측면을 요약해 보겠습니다.

css3의 그림자 효과:

css3의 box-shadow box-shadow의 속성을 참조하십시오(소개는 w3c 콘텐츠에서 가져옴).

box-shadow: h-shadow v-shadow blur spread color inset;

box-shadow는 상자에 하나 이상의 그림자를 추가합니다. 이 속성은 쉼표로 구분된 그림자 목록으로, 각각 2~4개의 길이 값, 선택적 색상 값 및 선택적 inset 키워드로 지정됩니다. 생략된 길이의 값은 0입니다.

값 설명

h-shadow 필수입니다. 수평 그림자의 위치입니다. 음수 값이 허용됩니다. (양수 값은 오른쪽, 음수 값은 왼쪽)

v-shadow 필수입니다. 수직 그림자의 위치입니다. 음수 값이 허용됩니다. (양수값은 하단, 음수값은 상단)

blur 선택사항. 퍼지 거리. (그림자가 가려진 부분)

확산 선택사항. 그림자의 크기. (그림자 크기)

색상은 선택사항입니다. 그림자의 색상입니다. CSS 색상 값을 참조하세요. (그림자의 색상)

삽입 선택 사항입니다. 외부 그림자(시작)를 내부 그림자로 변경합니다. (기본값은 외부, 내부 그림자, 외부 그림자 설정입니다.)

다음 단계는 다양한 그림자 효과를 하나씩 구현하는 것입니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>box-shadow</title>
    <style>
        .demo{
            width:200px;
            height:200px;
            border: 1px solid #999;
            margin: 50px auto;
            box-shadow: 10px 10px 5px #9521de;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

box-shadow: 10px 10px 5px #9521de (가로 및 세로 방향일 때) 양수 값)

Rendering:

CSS3에서 그림자 효과를 얻는 방법

box-shadow: -10px -10px 5px #9521de; (가로 및 세로 방향이 음수 값인 경우)

CSS3에서 그림자 효과를 얻는 방법

box-shadow: 0px 0px 10px #9521de ;(가로 방향이 0이면 주변에 그림자가 생깁니다. 이 상황도 자주 사용됩니다.)

CSS3에서 그림자 효과를 얻는 방법

box-shadow: 0px 0px 10px 10px #9521de; 이때 세 번째 값은 흐림 거리(그림자가 적용되는 영역)입니다. 네 번째 값은 그림자의 크기입니다(거의 사용되지 않음)

f27fd8cdd93fc3a3a5309aa413725c5- 3.jpg" alt="여기에 쓰기 이미지 설명"/>

**box-shadow: 0px 0px 10px #9521de inset;** 가로, 세로 방향이 0일 때 주변에 그림자가 생깁니다. 세 번째 값은 내부 그림자로 설정된 흐림 거리(그림자 적용 범위)

CSS3에서 그림자 효과를 얻는 방법

**box-shadow: 5px 5px 10px #9521de inset;** 가로 및 세로 방향의 양수 값의 경우, 왼쪽 상단에서 세 번째 값은 흐림 거리입니다(그림자 적용 범위)는 외부 그림자와 정확히 반대되는 내부 그림자로 설정됩니다.

CSS3에서 그림자 효과를 얻는 방법

**box-shadow: -5px -5px 10px #9521de inset ;** 가로, 세로 방향이 음수 값인 경우 오른쪽 아래 세 번째 값은 흐림 거리(그림자가 적용되는 영역)로, 내부 그림자가 외부 그림자와 정확히 반대가 되도록 설정)

CSS3에서 그림자 효과를 얻는 방법

위는 그림자의 효과와 위치에 대한 간단한 실험일 뿐입니다. 실제로는 프로젝트에서 사용된 효과입니다. 여전히 **box-shadow: 0px 0px 10px #9521de;*처럼 보입니다. * 및 **box-shadow: 10px 10px 5px #9521de;** 실제로 다양한 효과에 대한 친숙함을 통해 자유롭게 조합할 수 있으며, 각 값의 의미에 대한 친숙도가 높습니다.

스프레드 속성은 거의 사용되지 않습니다. 이는 그림자 반경을 확장하는 데 사용됩니다.

예: box-shadow: -5px -5px 10px 10px #9521de inset;

CSS3에서 그림자 효과를 얻는 방법

각 측면에 대해 개별적으로 그림자를 설정할 수도 있습니다. 그림자:5px 5px 5px #000,5px -5px 5px #000,-5px 5px 5px #000,-5px -5px 5px #000;

한마디로: 배우고 적용하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

맨티스BT

Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.