CSS3의 상자 그림자

기본 설명:

외부 그림자: box-shadow: X축 Y축 Rpx 색상

속성 설명(해당 순서): 그림자의 X축(음수 값 가능) 사용) 그림자의 Y축(음수값 사용 가능) 그림자 흐림 값(크기) 그림자의 색상

내부 그림자: box-shadow: X축 Y축 Rpx 색상 삽입

기본값은 외부 그림자 내부 그림자: 삽입은 내부 그림자로 설정 가능

참고(PS): 이 속성은 (div, p, h1, h2, h3, h4, h5, h6 등)이며 텍스트 그림자 설정에 사용되지 않습니다. 텍스트 그림자를 설정하는 경우 지식 포인트를 참조하십시오: text-shadow (같은 이유)

새로운 속성이므로 주요 브라우저와 호환되고 이러한 주요 브라우저의 하위 버전을 지원하며 주류 브라우저를 기반으로 합니다. box-shadow 속성을 사용할 때 -webkit-box-shadow 형식으로 속성 이름을 작성해야 합니다. Firefox 브라우저의 경우 -moz-box-shadow

 >

형식으로 작성해야 합니다. box-shadow의 특성을 더 잘 이해하려면 몇 가지 작은 테스트를 수행하십시오. 태그 내에 스타일을 직접 중첩하여 편리함)

테스트 1:

box-shadow : 0 0 10px #f00 (X축과 Y축은 설정한 값이 있는 곳으로 이동하지 않기 때문입니다. 반경 범위와 색상에 영향을 미칩니다)

테스트 2:

box-shadow:4px 4px 10px #f00; X축과 Y축이 양수 값(양수 값이 오른쪽과 아래쪽으로 이동)을 변경하여 이렇게 되었습니다‍

테스트 3:

box-shadow:-4px -4px 10px #f00;테스트 2와의 차이점은 X축, Y축이 음수 값으로 변경된 점입니다.(음수 값은 왼쪽 위로 이동) 그래서 이렇게 됩니다‍

마찬가지로 다음 양수 값과 다음 음수 값의 효과를 테스트할 수 있지만 여기서는 테스트를 수행하지 않겠습니다. . . . . . . . 테스트 4:

0px -10px 10px #000,/*그림자*/

10px 0px 10px 녹색,/*오른쪽 그림자*/

0px 10px 10px 파란색 "/* 하단 Shadow*/ >

box-shadow: 0px 0px 10px red inset; 위와 동일합니다. 다른 속성은 외부 그림자와 동일합니다.