CSS에서 내부 그림자를 만드는 방법

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;

값 설명:

삽입: 기본 그림자는 외부에 있습니다. 국경 . 삽입을 사용한 후 그림자는 테두리(투명 테두리라도) 내부, 배경 위와 내용 아래에 나타납니다. 어떤 사람들은 이 값을 마지막에 넣는 것을 좋아하고 브라우저도 이를 지원합니다.

: 그림자 오프셋을 설정하는 데 사용되는 처음 두 개의 값입니다. 는 수평 오프셋을 설정합니다. 음수 값이면 그림자가 요소의 왼쪽에 표시됩니다. 는 수직 오프셋을 설정합니다. 음수이면 그림자가 요소 위에 표시됩니다. 사용 가능한 단위는 를 참조하세요. 둘 다 0이면 그림자는 요소 뒤에 있습니다. 이때, 또는 를 설정하면 블러 효과가 나타납니다.

: 세 번째 값입니다. 값이 클수록 흐림 영역이 커지고 그림자가 더 크고 밝아집니다. 음수 값일 수 없습니다. 기본값은 0이며, 이 경우 그림자 가장자리가 선명합니다.

: 네 번째 양수 값을 취하면 그림자가 확장되고, 음수 값을 취하면 그림자가 축소됩니다. 기본값은 0이며, 이 경우 그림자는 요소만큼 커집니다.

: 관련 사항은 를 참조하세요. 지정하지 않으면 브라우저에 의해 결정됩니다. 일반적으로 색상 값이지만 Safari는 현재 투명을 사용합니다.

위 내용은 CSS에서 내부 그림자를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!