CSS3의 box-shadow 외부 그림자 및 외부 광선의 예에 대한 자세한 설명(그림)

기본 설명:

외부 그림자: box-shadow: 음수 값 사용) 그림자 흐림 값(크기) 그림자 색상

내부 그림자: box-shadow:

참고(PS) : 이 속성이 사용됩니다. (p, p, h1, h2, h3, h4, h5, h6 등)과 같은 상자 모델의 경우 텍스트 그림자를 설정하는 데 사용되지 않습니다. 텍스트 그림자를 설정하는 경우 지식 포인트를 참조하세요: text-shadow

(Similarly)

새로운 속성이기 때문에 주요 브라우저와 호환되고 이러한 주요 브라우저의 하위 버전을 지원하려면 주류 브라우저에서 box-shadow 속성을 사용할 때 속성 이름을 변경해야 합니다. -webkit-box-shadow 형식으로 작성됩니다. Firefox 브라우저는

O-Bour browser-O-BOX-SHADOW IE & GT; 9-BOX-SHADOW 기본 연습: Box를 더 잘 이해하기 위해 작성해야 합니다. - 그림자의 특성에 대해 몇 가지 작은 테스트를 수행합니다. (태그에 스타일을 직접 중첩하는 편의를 위해)

테스트 1:

<p style="box-shadow: 0 0 10px #f00; border:1px solid green">
</p>  box-shadow: 0 0 10px #f00

(X축과 Y축이 이동되지 않기 때문에, 설정 값은 그 자체입니다. 효과 반경 범위, 색상)

테스트 2:

<p   style="max-width:90%">
</p> box-shadow:4px 4px 10px #f00;

이 테스트 1과 다릅니다. X축과 Y축이 변경되었습니다.

양수 값 (양수 값은 오른쪽과 아래쪽으로 이동) 그래서 이렇게 되었습니다‍

테스트 3:

<p style="box-shadow:-4px -4px 10px #f00; border:1px solid green">
</p> box-shadow:-4px -4px 10px #f00;

테스트 2와의 차이점 그거야? X축, Y축이 음수로 변경되었습니다(음수는 왼쪽 및 위쪽으로 이동) 그러면 이렇게 됩니다‍

같은 이유: 테스트할 수 있습니다. 하나의 양수 값과 하나의 음수 값의 효과는 여기에서 테스트되지 않습니다. . . . . . . .

테스트 4:

<p  style="box-shadow:-10px 0px 10px red,   /*左边阴影*/ 
0px -10px 10px #000,  /*上边阴影*/ 
10px 0px 10px green,  
/*右边阴影*/ 
0px 10px 10px blue;" 
/*下边阴影*/ 
></p>

이 코드를 보면 매우 지저분하다고 느끼실 수 있지만, 효과 그림을 보시면 어떻게 되었는지 이해가 되실 겁니다. X축과 Y축 위치, 색상 값, 그림자만 바꾸시면 됩니다. (쉼표로 구분) 몇번만 더 연습해보세요

测试5：--内阴影  

<p style="box-shadow: 0px 0px 10px red inset; border:1px solid green">
</p> box-shadow: 0px 0px 10px red inset;

  与上面写法相同 唯一不同的是添加了一个inset 其它属性与外阴影相同

百变不离其宗，练习就能熟悉，懂了就知道原理,随意改写，在配合css3的动画效果， 闪光层（字）都很简单实现。。希望对你有帮助。。

위 내용은 CSS3의 box-shadow 외부 그림자 및 외부 광선의 예에 대한 자세한 설명(그림)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!