CSS3에서 그림자 효과를 얻는 방법
- 醉折花枝作酒筹원래의
- 2021-07-26 11:00:205154검색
CSS에서는 box-shadow 속성을 사용하여 그림자 효과를 얻을 수 있습니다. "box-shadow: 수평 그림자 위치, 수직 그림자 위치, 흐림 거리, 그림자 크기, 색상 삽입 스타일"만 설정하면 됩니다. 요소. 이 속성은 상자에 하나 이상의 그림자(쉼표로 구분된 그림자 목록)를 추가합니다.
이 튜토리얼의 운영 환경: 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:
box-shadow: -10px -10px 5px #9521de; (가로 및 세로 방향이 음수 값인 경우)
box-shadow: 0px 0px 10px #9521de ;(가로 방향이 0이면 주변에 그림자가 생깁니다. 이 상황도 자주 사용됩니다.)
box-shadow: 0px 0px 10px 10px #9521de; 이때 세 번째 값은 흐림 거리(그림자가 적용되는 영역)입니다. 네 번째 값은 그림자의 크기입니다(거의 사용되지 않음)
f27fd8cdd93fc3a3a5309aa413725c5- 3.jpg" alt="여기에 쓰기 이미지 설명"/>
**box-shadow: 0px 0px 10px #9521de inset;** 가로, 세로 방향이 0일 때 주변에 그림자가 생깁니다. 세 번째 값은 내부 그림자로 설정된 흐림 거리(그림자 적용 범위)
**box-shadow: 5px 5px 10px #9521de inset;** 가로 및 세로 방향의 양수 값의 경우, 왼쪽 상단에서 세 번째 값은 흐림 거리입니다(그림자 적용 범위)는 외부 그림자와 정확히 반대되는 내부 그림자로 설정됩니다.
**box-shadow: -5px -5px 10px #9521de inset ;** 가로, 세로 방향이 음수 값인 경우 오른쪽 아래 세 번째 값은 흐림 거리(그림자가 적용되는 영역)로, 내부 그림자가 외부 그림자와 정확히 반대가 되도록 설정)
위는 그림자의 효과와 위치에 대한 간단한 실험일 뿐입니다. 실제로는 프로젝트에서 사용된 효과입니다. 여전히 **box-shadow: 0px 0px 10px #9521de;*처럼 보입니다. * 및 **box-shadow: 10px 10px 5px #9521de;** 실제로 다양한 효과에 대한 친숙함을 통해 자유롭게 조합할 수 있으며, 각 값의 의미에 대한 친숙도가 높습니다.
스프레드 속성은 거의 사용되지 않습니다. 이는 그림자 반경을 확장하는 데 사용됩니다.
예: box-shadow: -5px -5px 10px 10px #9521de inset;
각 측면에 대해 개별적으로 그림자를 설정할 수도 있습니다. 그림자:5px 5px 5px #000,5px -5px 5px #000,-5px 5px 5px #000,-5px -5px 5px #000;
한마디로: 배우고 적용하세요.
추천 학습:
css 비디오 튜토리얼위 내용은 CSS3에서 그림자 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!