CSS3 상자 그림자 그림자 그래픽 튜토리얼

이 글에서는 주로 CSS3 박스 섀도우 섀도우(외부 섀도우 및 외부 글로우)를 소개합니다. 5가지 테스트를 통해 사진은 다양한 위치에서 섀도우의 다양한 효과를 보여줍니다.

기본 지침:

외부 그림자 : box-shadow : 크기) 그림자 색상

내부 그림자 : box-shadow : (p, p, h1, h2, h3, h4, h5, h6 등)은 사용하지 않습니다. 텍스트 그림자를 설정하려면 지식 포인트를 참조하세요: text-shadow (같은 이유)

새로운 속성이므로 호환성을 위해 주요 브라우저는 이러한 주요 버전의 하위 버전도 지원합니다. 브라우저에서 box-shadow 속성을 사용하는 경우 속성 이름을

로 작성해야 합니다. 기본 연습:

-webkit-box-shadow的形式。Firefox浏览器则需要写成-moz-box-shadow的形式，欧朋浏览器  -o-box-shadow   IE>9  -ms-box-shadow   

더 나은 성능을 위해 box-shadow의 특성을 이해하고 몇 가지 작은 작업을 수행합니다. 테스트: (태그에 직접 스타일을 중첩하는 편의를 위해)테스트 1:

: 0 0 10px #f00 (설정값이 반경 범위와 색상에 영향을 미치는 곳에서는 X축과 Y축이 이동하지 않기 때문입니다.)

테스트 2: < ;p style="box- Shadow:4px 4px 10px #f00; border:1px solid green">

box-shadow:4px 4px 10px #f00; 테스트 1과 달리 X축과 Y축이 양수 값(양수)으로 변경되었습니다. 값은 오른쪽과 아래쪽을 가리킴) 그래서 다음과 같이 됩니다‍

테스트 3:

< ;/ p> box-shadow:-4px -4px 10px #f00;테스트 2와의 차이점은 X축과 Y축이 음수 값(음수 값은 왼쪽 및 위쪽으로 이동)으로 변경되었기 때문에 like this‍

마찬가지로 다음 양수 값과 다음 음수 값의 효과를 테스트할 수 있지만 여기서는 테스트를 수행하지 않겠습니다. . . . . . . .

테스트 4:

 " 0px -10px 10px #000, /*상단 그림자*/  10px 0px 10px green, /* right 그림자*/ x 0px 10px 10px blue; X축 및 Y축 위치, 색상 값 및 그림자 값 크기(쉼표로 구분)를 몇 번 더 연습해 보세요

테스트 5 : --Inner Shadow

box-shadow: 0px 0px 10px red inset; 인셋이 추가됩니다. 다른 속성은 외부 그림자와 동일합니다

동일한 원리에서 벗어나지 않으면서 변경할 수 있습니다. 일단 이해하고 나면 원리를 알게 될 것입니다. CSS3의 애니메이션 효과로 플래시 레이어(워드)를 쉽게 구현할 수 있습니다. . 도움이 되길 바랍니다. .

위 내용은 CSS3 상자 그림자 그림자 그래픽 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!