내부 그림자를 포함하여 CSS3에서 box-shadow 속성을 사용하는 방법을 공유하세요. box-shadow: inset

CSS에는 많은 속성이 있습니다. 일부 속성은 오랫동안 사용하지 않으면 잊어버리기 쉽습니다. 특히 여러 값을 설정해야 하는 속성은 더욱 그렇습니다. 예: box-shadow. CSS3에서 box-shadow를 사용할 때마다 box-shadow를 사용하는 방법이 기억나지 않습니다. 이제 해당 효과를 얻기 위해 정보를 찾아야 합니다. -그림자 및 상자 그림자 사용 방법 내부 그림자를 사용하면 나중에 보기가 더 쉽습니다.

관련 권장사항:

1. 온라인 데모: "box-shadow"

2. 비디오 튜토리얼: "box-shadow"

1.box- 그림자: 없음 | 삽입(옵션 값, 설정되지 않음, 외부 투영용, 설정, 내부 투영용) x-offset(그림자의 수평 오프셋, 양의 방향은 오른쪽) y-offset(그림자의 수직 오프셋, 양의 방향은 아래쪽임) ) 흐림 반경(그림자 흐림 반경, 양수, 0은 흐림 효과 없음을 의미, 값이 클수록 흐림) 확산 반경(그림자 확장 반경, 양수 또는 음수일 수 있음) 색상(객체 그림자의 색상 설정)

속성 값 설명:

1. 그림자 유형: 이 매개변수는 선택 사항입니다. 기본 투영 방법은 외부 그림자입니다. 고유 값 "삽입"을 사용하면 외부 그림자가 내부 그림자로 변환됩니다. 오프셋: 그림자의 수평 오프셋을 나타냅니다. 해당 값은 양수 또는 음수일 수 있습니다. 양수 값은 그림자가 개체의 오른쪽에 있고 음수 값이 있으며 그림자는 개체의 왼쪽에 있습니다

3. -오프셋: 그림자의 수직 오프셋을 나타냅니다. 값은 양수이거나 음수일 수도 있습니다. 양수 값의 경우 그림자는 개체의 맨 위에 있습니다. 4. 그림자 흐림 반경: 이 매개변수는 선택 사항이며 값이 0인 경우에만 양수일 수 있습니다. 값이 클수록 그림자의 가장자리가 흐릿해집니다. : 이 매개변수는 선택사항이며 해당 값은 양수 또는 음수일 수 있습니다. 양수 값이면 전체 그림자가 확장됩니다.

6. 그림자 색상: 이 매개변수는 색상이 설정되지 않은 경우 선택사항입니다. 브라우저는 기본 색상을 사용하지만 각 브라우저의 기본 색상은 다릅니다. 특히 웹킷 커널 아래의 Safari 및 Chrome 브라우저는 색상, 즉 투명도를 지원하지 않으므로 이 매개변수를 생략하지 않는 것이 좋습니다.

참고:
여러 레이어의 그림자의 경우 가장 안쪽 레이어의 우선순위가 가장 높으며 순서대로 감소합니다. 구분하려면 쉼표(",")를 사용하세요.



2. 박스 섀도우의 실제 적용

예 1: X축과 Y축을 설정하지 않고 그림자 흐림 반경을 15px로 설정하면 자체 반경 범위와 색상 내에서 작동합니다.

box-shadow: 0 0 15px #f00;

Rendering:

예 2: X축과 Y축을 양수 값으로 설정 ​​(양수 값, -shadow: inset은 box-shadow의 내부 그림자입니다. 유일한 차이점은

box-shadow:4px 4px 15px #f00;

렌더링:

예제 4: 사각형의 네 변을 서로 다른 색상으로 설정하지만 그림자 흐림 반경은 모두 10px

box-shadow:0 0 15px #f00 inset;

렌더링:

위에서 소개합니다. CSS3에서 box-shadow를 사용하는 방법, box-shadow를 사용하는 방법: 내부 그림자 삽입 및 box-shadow의 실제 적용. 상자 그림자 주위에 어떤 종류의 효과를 설정할지는 특정 요구 사항에 따라 다릅니다.

위 내용은 내부 그림자를 포함하여 CSS3에서 box-shadow 속성을 사용하는 방법을 공유하세요. box-shadow: inset의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!