CSS 그림자 효과는 우리가 자주 사용하는 CSS 속성인데, 혹시 주의 깊게 이해해 보셨나요? 사용할 때 Blue Lake에서 직접 복사하면 되나요? 각 매개변수를 이해하고 있나요? 그림자를 사용하면 어떤 아름다운 효과를 얻을 수 있나요?
그림자 효과는 웹 디자인에서 자주 사용되는데, CSS3가 등장하기 전에는 텍스트나 요소에 그림자 효과를 추가하려면 이미지를 사용해야 했기 때문에 매우 불편했습니다. CSS3가 등장한 후에는 이미지를 사용하지 않고도 text-shadow와 box-shadow라는 두 가지 속성을 통해 텍스트나 요소에 그림자 효과를 추가할 수 있습니다.
1. 텍스트 그림자
CSS의 text-shadow 속성을 사용하면 텍스트에 그림자 효과를 설정할 수 있습니다. 속성의 구문은 다음과 같습니다.
텍스트 그림자:오프셋-x오프셋-yblurcolor;
구문은 다음과 같이 설명됩니다.
(1) offset-x: 필수 매개변수, 그림자의 수평 오프셋을 설정합니다. 음수 값일 수 있습니다.
(2) offset-y: 필수 매개변수, 그림자의 수직 오프셋을 설정합니다. 음수 값일 수 있습니다.
(3) 흐림: 선택적 매개변수로 흐림 반경을 설정합니다. 값이 클수록 흐림이 커지고 그림자 가장자리가 흐려집니다.
(4) color: 선택 매개변수로 그림자의 색상을 설정합니다. 값이 생략되거나 지정되지 않으면 색상 속성의 값이 사용됩니다.
팁: 여러 그룹의 그림자 효과를 동시에 설정하려면 text-shadow 속성을 사용하세요. 정의된 그림자 효과 그룹은 정의 순서대로 나열되며 첫 번째 그림자가 맨 위에 표시됩니다. 곧. 또한 텍스트의 그림자 효과를 취소하려면 text-shadow 속성 값을 없음으로 설정하면 됩니다.
[예제] text-shadow 속성을 사용하여 텍스트에 그림자 효과를 추가합니다.
<!doctypehtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=ie=edge><title>text-shadow</title></head><style>div :first-child{text-shadow:5px8px3pxred;}</style><body><div>텍스트 그림자</div></body></html>실행 결과:
분석: text-shadow: 5px 8px 3px 빨간색;
2.상자 그림자
CSS의 box-shadow 속성을 사용하여 HTML 요소에 대한 그림자 효과를 설정할 수 있습니다. 속성의 구문은 다음과 같습니다.
상자 그림자:h-shadowv-shadowblurspreadcolorinset;
구문은 다음과 같이 설명됩니다.
(1) h-shadow: 필수 매개변수, 그림자의 수평 방향 오프셋을 설정합니다. 음수 값일 수 있습니다.
(2) v-shadow: 필수 매개변수, 그림자의 수직 방향 오프셋을 설정합니다. 음수 값일 수 있습니다.
(3) 흐림: 선택적 매개변수로 흐림 반경을 설정합니다. 값이 클수록 흐림이 커지고 그림자 가장자리가 흐려집니다.
(4) 확산: 선택적 매개변수, 그림자의 크기를 설정합니다.
(5) 색상: 선택적 매개변수, 그림자 색상을 설정합니다.
(6) inset: 선택적 매개변수로, 기본 외부 그림자(outset)를 내부 그림자로 변경합니다.
팁: text-shadow 속성과 유사하게 box-shadow 속성은 동시에 여러 그룹의 그림자 효과를 설정할 수도 있습니다. 정의된 여러 그림자 효과 그룹은 정의된 순서대로 나열됩니다. 끝에 첫 번째 그림자가 있습니다.
[예제] box-shadow 속성을 사용하여 텍스트에 그림자 효과를 추가합니다.
<!doctypehtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=ie=edge><title>상자 그림자</title></head><style >div:first-child{width:200px;height:200px;border:1pxsolidblack;box-shadow:5px8px3px2pxred;}</style><body><div></div></body></html>실행 결과:
분석: box-shadow: 5px 8px 3px 2px 빨간색 매개변수 설명;