CSS box-shadow는 요소 프레임 주위에 그림자 효과를 추가하는 CSS 속성입니다. 오프셋, 블러 반경, 확산 반경 및 색상 값을 지정하여 드롭 섀도, 내부 섀도 및 여러 섀도 레이어를 만들 수 있습니다.

box-shadow의 매개변수는 무엇입니까?

box-shadow 속성은 여러 값을 허용합니다: 수평 오프셋(X), 수직 오프셋(Y), 블러 반경, 확산 반경, 색상 및 선택적 inset 키워드. 쉼표로 구분하여 여러 섀도를 지정할 수도 있습니다.

inset 키워드는 섀도를 외부 섀도(드롭 섀도)에서 내부 섀도로 변경합니다. inset이 지정되면 섀도가 요소 테두리 바깥쪽이 아닌 안쪽에 그려져 인세트 효과를 생성합니다.

블러 반경은 섀도 가장자리가 얼마나 흐려지는지를 결정합니다. 값 0은 날카롭고 단단한 가장자리를 만듭니다. 더 큰 값은 요소에서 더 멀리 확장되는 더 확산되고 부드러운 섀도를 만듭니다.

확산 반경은 섀도 크기를 확장하거나 축소합니다. 양수 값은 섀도를 요소보다 크게 만들고, 음수 값은 작게 만듭니다. 이는 블러가 적용되기 전 섀도에 영향을 미칩니다.

여러 섀도를 어떻게 만듭니까?

각 섀도 정의를 쉼표로 구분하여 여러 섀도를 만들 수 있습니다. 각 섀도는 다른 오프셋, 블러, 확산 및 색상 값을 가질 수 있습니다. 섀도는 선언된 순서대로 적용되며, 첫 번째 섀도가 맨 위에 있습니다.

네, RGBA, HSLA, HEX 또는 이름 지정 색상을 포함한 모든 CSS 색상 형식을 사용할 수 있습니다. RGBA와 HSLA는 배경과 자연스럽게 혼합되는 반투명 섀도를 만드는 데 특히 유용합니다.

생성기 인터페이스에서 "코드 복사" 버튼을 클릭하기만 하면 됩니다. CSS 코드가 클립보드에 복사되어 스타일시트나 HTML 파일에 직접 붙여넣을 수 있습니다.

네, box-shadow는 Chrome, Firefox, Safari, Edge, Opera를 포함한 모든 모던 브라우저에서 지원됩니다. 2011년부터 CSS3의 일부였으며 뛰어난 브라우저 호환성을 가지고 있습니다.

box-shadow는 모던 브라우저의 성능에 최소한의 영향을 미칩니다. 그러나 많은 요소에서 큰 블러 반경을 가진 여러 복잡한 섀도를 사용하면 렌더링 성능에 영향을 줄 수 있습니다, 특히 모바일 장치에서.

일반적인 사용법에는 카드 높이 효과 생성, 버튼에 깊이 추가, 인세트 양식 필드 생성, 머티리얼 디자인 섀도 구현 및 겹치는 요소 사이의 시각적 분리를 추가하는 것이 포함됩니다.

네, box-shadow는 CSS 트랜지션 또는 애니메이션을 사용하여 애니메이션화할 수 있습니다. 그러나 box-shadow 애니메이션화는 성능 집약적일 수 있습니다. 더 나은 성능을 위해 불투명도 트랜지션과 함께 의사 요소를 사용하는 것을 고려하십시오.

무료 온라인 CSS box-shadow 생성기. 조정 가능한 오프셋, 블러, 확산, 색상, 인셋으로 아름다운 그림자를 시각적으로 생성. 라이브 미리보기 및 즉시 코드 복사.

