CSS의 단일 요소에 여러 개의 상자 그림자를 어떻게 만들 수 있습니까?

단일 요소에 여러 CSS3 상자 그림자 사용

CSS에서는 CSS3를 사용하여 단일 요소에 여러 상자 그림자를 적용할 수 있습니다. 이는 내부 광선과 외부 그림자를 결합하는 등 복잡한 그림자 효과를 만들 때 더 큰 유연성을 제공합니다.

문제:

다음과 같은 Photoshop 모형을 복제하려고 합니다. 버튼에는 내부의 밝은 상자 그림자와 외부의 그림자라는 두 개의 그림자가 있습니다. 그러나 CSS box-shadow 속성은 요소당 하나의 그림자 효과만 허용하는 것 같습니다.

해결책:

원하는 이중 그림자 효과를 얻으려면 다음을 사용할 수 있습니다. 여러 그림자를 지정하는 쉼표로 구분된 구문입니다. 예:

<code class="css">box-shadow: inset 0 2px 0px #dcffa6, 0 2px 5px #000;</code>

이 코드에서:

• 첫 번째 그림자는 더 밝은 색상(#dcffa6)과 2px의 오프셋을 갖는 삽입 상자 그림자입니다.
• 두 번째 그림자는 더 어두운 색상(#000)과 가로 오프셋 2px, 세로 오프셋 5px의 그림자입니다.

이 그림자를 쉼표로 구분합니다. , 원하는 대로 내부 광선과 외부 그림자가 모두 포함된 버튼을 만들 수 있습니다.

위 내용은 CSS의 단일 요소에 여러 개의 상자 그림자를 어떻게 만들 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!