CSS3 box-shadow 속성은 요소의 하나 이상의 그림자 효과를 설명하는 데 사용됩니다. 이 속성을 사용하면 원하는 거의 모든 그림자 효과를 얻을 수 있습니다. 그러나 box-shadow 속성 구문과 값은 매우 유연하여 초보자가 이해하기에는 다소 어렵습니다.
시뮬레이션 주소: https://www.html.cn/tool/css3Preview/Box-Shadow.html
CSS 코드:
/* offset-x | offset-y | color */ box-shadow: 60px -16px teal; /* offset-x | offset-y | blur-radius | color */ box-shadow: 10px 5px 5px black; /* offset-x | offset-y | blur-radius | spread-radius | color */ box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); /* inset | offset-x | offset-y | color */ box-shadow: inset 5em 1em gold; /* Any number of shadows, separated by commas */ box-shadow: 3px 3px red, -1em 0 0.4em olive; /* Global keywords */ box-shadow: inherit; box-shadow: initial; box-shadow: unset;
값 설명:
삽입: 기본 그림자는 외부에 있습니다. 국경 . 삽입을 사용한 후 그림자는 테두리(투명 테두리라도) 내부, 배경 위와 내용 아래에 나타납니다. 어떤 사람들은 이 값을 마지막에 넣는 것을 좋아하고 브라우저도 이를 지원합니다.
8b89863bbb9a724179580669ccdd6d16 d1d21daad911d430a139ccdb7ee6c1d6: 그림자 오프셋을 설정하는 데 사용되는 처음 두 개의 d82af2074b26fcfe177e947839b5d381 값입니다. 8b89863bbb9a724179580669ccdd6d16는 수평 오프셋을 설정합니다. 음수 값이면 그림자가 요소의 왼쪽에 표시됩니다. d1d21daad911d430a139ccdb7ee6c1d6는 수직 오프셋을 설정합니다. 음수이면 그림자가 요소 위에 표시됩니다. 사용 가능한 단위는 41896d10050eaeae4e522ca1d7322455를 참조하세요. 둘 다 0이면 그림자는 요소 뒤에 있습니다. 이때, 747111f72d266ea1b5d91cda9f8aa39e 또는 5e387985f926f4cd5497444dde74a02d를 설정하면 블러 효과가 나타납니다.
747111f72d266ea1b5d91cda9f8aa39e: 세 번째 d82af2074b26fcfe177e947839b5d381 값입니다. 값이 클수록 흐림 영역이 커지고 그림자가 더 크고 밝아집니다. 음수 값일 수 없습니다. 기본값은 0이며, 이 경우 그림자 가장자리가 선명합니다.
5e387985f926f4cd5497444dde74a02d : 네 번째 d82af2074b26fcfe177e947839b5d381 양수 값을 취하면 그림자가 확장되고, 음수 값을 취하면 그림자가 축소됩니다. 기본값은 0이며, 이 경우 그림자는 요소만큼 커집니다.
b10fb37415d019cfffa8c4d7366c607f: 관련 사항은 b10fb37415d019cfffa8c4d7366c607f를 참조하세요. 지정하지 않으면 브라우저에 의해 결정됩니다. 일반적으로 색상 값이지만 Safari는 현재 투명을 사용합니다.
위 내용은 CSS에서 내부 그림자를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!