CSS3 그림자 사용 방법 소개

1. 테두리 그림자

표준 구문:

box-shadow: h-offset v-offset 흐림 확산 색상 [ 삽입 ],...

[ 부분 오른쪽 아래로의 이동량은 양수 값, 왼쪽 위 값은 음수 값입니다. ]

a. 그림자가 여러 개인 경우 쉼표로 구분하여 아래 방향으로 순서대로 쌓습니다. 첫 번째 항목은 맨 위에 작성

b. 삽입이 있는 경우 내부 그림자가 되지만 참고: 원래 그림자에 삽입을 추가하면 그림자가 반대쪽 내부에 있게 됩니다. , 단순히 반대 방향으로 뒤집히지는 않습니다.

c. 스프레드 확장의 가장 큰 이점 및 효과는 음수 값을 취하는 경우 나머지 세 면에 대한 간섭을 차단하거나 줄이는 것입니다.

d. 색상을 사용하면 내부 그림자가 색상 부분에 의해 가려지지만 내부 색상 DIV를 상대적으로 설정하고 z-index를 -1로 설정하여 가려진 내부 그림자를 표시할 수 있습니다.

[이런 상황은 드물고 제한이 많습니다]

2. 텍스트 섀도우

표준 구문:

text-shadow: h-offset v- 오프셋 흐림 색상,...

[오프셋은 오른쪽 아래가 양수이고 왼쪽 위가 음수입니다.]

그림자가 여러 개인 경우 쉼표로 구분하여 순서를 지정합니다.

Effect 2: Apple Style Effect

.demo4 { color: #000;
text-shadow: 0 1px 1px #fff ; }

효과 3: Photoshop 엠보싱 효과

.demo5 { color: #ccc;
text-shadow: -1px -1px 0 #fff,1px 1px 0 #333,1px 1px 0 #444;}

효과 4: Blurytext 효과

.demo6 { color: transparent;
text-shadow: 0 0 5px #f96;}

효과 7: 3D 텍스트 효과

.demo10 { color: #fff;
text-shadow: 1px 1px rgba(197, 223, 248,0.8),2px 2px rgba(197, 223, 248, 0.8 ),3px 3px rgba(197, 223,

위 내용은 CSS3 그림자 사용 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!