CSS에서 -webkit-box-shadow와 box-shadow의 차이점

우리 모두 알고 있듯이 CSS는 개발자가 원하는 스타일을 요소에 추가할 수 있는 다양한 속성과 의사 클래스를 제공합니다. 이러한 속성 중 하나는 box-shadow 속성입니다. 이를 통해 요소 주위에 그림자 같은 효과를 추가할 수 있습니다.

상자 그림자 속성

Box Shadow는 요소에 외부 또는 내부 그림자 효과를 만드는 데 사용되는 CSS 속성입니다. 요소에 하나 이상의 그림자를 적용하며, 각각 요소의 X 및 Y 오프셋, 흐림 반경, 확산 반경, 색상 및 불투명도 값으로 지정됩니다.

box-shadow 속성은 쉼표로 구분된 여러 값을 허용할 수 있습니다. 각 값은 그림자 효과를 정의합니다. 오프셋이 없는 상자 그림자는 마치 종이에 인쇄한 것처럼 평평한 모양으로 보입니다.

box-shadow를 적용하는 요소가 어떤 형태의 borderradius를 지정한다고 가정하면 box-shadow의 효과도 해당 요소와 같은 곡선 테두리를 갖게 됩니다. 여러 상자 그림자는 여러 텍스트 그림자와 동일한 순서로 z축에서 정렬됩니다.

-

를 사용하여 요소에 상자 그림자를 할당할 수 있습니다.

• 두 개의 값 - 두 개의 값이 있는 box-shadow 속성을 사용할 때마다 해당 값은 X 및 Y 오프셋의 값으로 사용됩니다.

• 세 가지 값 - 처음 두 값은 X 및 Y 오프셋 값으로 작동하고 세 번째 값은 흐림 반경 효과에 사용됩니다.

• 네 가지 값 - 네 번째 값은 확산 반경 값으로 간주되며, 나머지 값은 각각 X 오프셋, Y 오프셋 및 흐림 반경 값입니다.

• Inset - 선택적인 값이며 이 값이 있으면 프레임의 그림자가 한쪽으로 치우쳐집니다. 이것을 지정하지 않으면 그림자가 그림자처럼 위로 솟아오른 것처럼 보입니다

• Color - 그림자의 색상을 설정하는 또 다른 선택적 값입니다. 지정하지 않으면 기본 색상은 요소의 현재 색상이 됩니다.

초기값은 none이며 모든 요소에 적용됩니다. 섀도우 목록의 애니메이션 유형은 애니메이션에 사용할 수 있지만 상속할 수는 없습니다.

예

아래는 CSS에서 box-shadow 속성을 사용하는 예입니다.

으아악

이제 상자 Shadow 속성을 이해했으므로 CSS에 "webkit"이 무엇이고 왜 필요한지 살펴보겠습니다. 나중에 우리는 웹킷 박스 Shadow에 대해 논의할 것입니다.

웹킷이란 무엇인가요?

Webkit 은 Apple의 웹 브라우저 엔진이며 거의 모든 macOS 애플리케이션에서 사용됩니다. Firefox용 Gecko, Edge용 Blink 등 다양한 웹 브라우저 엔진이 있습니다. 그래서 질문이 생깁니다. 왜 필요한가요?

CSS 선택기의 -webkit 접두사는 -moz 속성과 유사하게 해당 엔진에서만 처리되는 속성을 나타냅니다. 이를 지정함으로써 기본적으로 브라우저는 특정 브라우저 엔진을 사용할 때만 이를 사용하고 그렇지 않으면 그대로 두도록 지시합니다. 사용하기가 번거롭기 때문에 많은 개발자가 가능한 한 빨리 중단하기를 원합니다.

CSS의 Webkit-box-shadow 속성

box-shadow 속성과 마찬가지로 webkit-box-shadow 속성도 적용되는 요소의 프레임에 그림자 같은 효과를 추가합니다. 그러나 구현은 Chrome 또는 Apple Safari와 같은 브라우저에만 적용된다는 점에 유의하는 것이 중요합니다.

이 속성에 할당할 수 있는 가능한 값은 -

• X-offset - 요소까지의 수평 오프셋 또는 거리를 지정합니다.

• Y 오프셋 - 오프셋이나 거리도 지정하지만 수직 방향입니다

• Blur - 길이 값으로, 크기가 크면 생성되는 흐림 효과가 커지므로 그림자 효과도 커지며, 그 반대의 경우도 마찬가지입니다.

예

아래는 CSS에서 웹 키트-박스-섀도를 사용하는 예입니다.

으아악

box-shadow와 webkit-box-shadow의 차이점

이제 이 두 가지 속성을 이해했으므로 두 속성의 차이점을 나열해 보겠습니다.

• box-shadow 속성은 보편적으로 구현되는 반면, "webkitbox-shadow"는 특정 웹 브라우저 엔진(예: Safari 또는 Google Chrome)을 사용하는 브라우저에서만 작동합니다.

• box Shadow 속성을 사용하면 모든 최신 버전에서 그림자 효과의 스타일을 지정할 수 있지만 이전 버전의 브라우저에서 작업해야 한다면 webkit-box-shadow를 사용해야 합니다.

결론

요약하자면, CSS에서 -webkit-box-shadow와 box-shadow의 주요 차이점은 -webkit-box-shadow가 Webkit 브라우저에 도입된 box-shadow 속성에 대한 공급업체 접두사라는 것입니다. box-shadow 속성을 사용하면 이미지나 기타 외부 리소스를 사용하지 않고도 요소에 그림자 효과를 적용할 수 있습니다. -webkit-box-shadow 속성은 더 이상 사용되지 않으며 표준 box-shadow 구문으로 대체되었습니다. 대부분의 최신 브라우저가 이를 지원하기 때문입니다. 요약하면 두 속성 모두 요소에 그림자를 만드는 데 사용되지만 시간이 지나면 다른 하나는 더 이상 사용되지 않으므로 그 중 하나만 사용해야 합니다.

위 내용은 CSS에서 -webkit-box-shadow와 box-shadow의 차이점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!