상자 요소에 그림자 추가하기 - 텍스트 그림자, CSS 이외에 더미

텍스트 그림자 외에도 CSS 3은 태그와 같은 상자 요소에 그림자를 추가 할 수있는 기능을 제공합니다. 그림에서 Jelly Rancher 웹 사이트의이 예제 페이지와 같이 섹션을 설정하는 데 드롭 섀도우가 사용 된 방법을 볼 수 있습니다.

텍스트 그림자와 마찬가지로 첫 번째 값은 Safari 브라우저에 수평 오프셋을 알려주고 두 번째 값은 수직 오프셋을 나타내며 세 번째 값은 그림자가 흐려지는 방식을 나타냅니다. 다시 말하지만 기본값은 0이며 흐림을 지정하지 않으면 그림자의 색상이 완전히 단색입니다.

WebKit 브라우저의 상자 놓기 구문은 다음과 같습니다.

-webkit-box-shadow: 가로 방향 흐림 효과 색상;

투명도를 추가 할 수 있기 때문에 RGBa 색상을 사용하면 그림자의 모양을보다 잘 제어 할 수 있습니다. 마찬가지로 em 측정을 사용하면 텍스트의 크기가 변경되면 더 잘 조정되는 그림자가 만들어집니다.

다음 스타일은 페이지의 모든 상자 요소에 그림자를 추가합니다.

div {-webkit-box-shadow:. 15em. 25em. 5em rgba (27, 27, 27,.6);}