CSS에서 테두리 그림자를 설정하는 방법

box-shadow 속성은 CSS에서 테두리 그림자를 설정하는 데 사용할 수 있습니다. 이 속성은 테두리에 하나 이상의 그림자를 추가하고 "box" 구문으로 그림자의 픽셀 길이, 너비, 흐림 거리 및 색상을 설정할 수 있습니다. -shadow:h-shadow v-shadow 블러 확산 색상 삽입".

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

CSS에서는 box-shadow 속성을 통해 테두리 그림자를 설정하고 텍스트 상자에 그림자를 적용할 수 있습니다. 이 속성은 그림자의 픽셀 길이, 너비, 흐림 거리 및 그림자의 색상을 설정합니다.

box-shadow 속성은 상자에 하나 이상의 그림자를 추가할 수 있습니다. 이 속성은 쉼표로 구분된 그림자 목록으로, 각각 2~4개의 길이 값, 선택적 색상 값 및 선택적 inset 키워드로 지정됩니다. 생략된 길이의 값은 0입니다.

구문: ​​

box-shadow: h-shadow v-shadow blur spread color inset;

속성 값:

• h-shadow: 그림자 수평 오프셋을 참조하며 해당 값은 양수 또는 음수일 수 있습니다. 양수 값, 그림자는 개체의 오른쪽, 음수 값입니다. 그림자는 개체의 오른쪽에 있습니다. 왼쪽

• v-shadow: 그림자의 수직 오프셋을 나타냅니다. 해당 값은 양수 또는 음수일 수도 있습니다. 양수 값의 경우 그림자는 개체의 아래쪽에 있습니다. . 음수 값의 경우 그림자는 개체의 상단에 있습니다.

• blur: 이 매개변수는 선택 사항이며 값이 0이면 그림자에 흐림 효과가 없음을 의미합니다. 흐림 효과. 값이 클수록 그림자의 가장자리가 흐려집니다.

• 확산: 그림자 확장 반경. 이 매개변수는 양수이거나 음수일 수 있습니다.

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

• inset: 외부 레이어에서 설정 Shadow(시작 시) 그림자 내부의 그림자를 선택적으로 변경합니다. 생략 가능합니다.

참고: **여러 레이어의 그림자의 경우 가장 안쪽 레이어의 우선순위가 가장 높으며 순서대로 감소합니다.

box-shadow의 실제 적용

예제 1

X축과 Y축을 설정하지 말고 그림자 흐림 반경을 15px로 설정하면 반경 범위 내에서 효과가 나타나며 color

box-shadow: 0 0 15px #f00;

예시 2

X축과 Y축을 양수 값으로 설정​​(양수 값: 유일한 차이점은 인셋이 추가된다는 점

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

예시 4

4개 설정 사각형의 측면은 서로 다른 색상을 가질 수 있지만 그림자 흐림 반경은 10px

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

입니다(동영상 공유 학습: css 동영상 튜토리얼
)

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