CSS3를 사용한 레이어 그림자 및 텍스트 그림자 효과에 대한 자세한 소개

box-shadow 레이어 그림자

box-shadow: 그림자 유형 X 수평 오프셋(양수 및 음수 값을 사용할 수 있음) Y 수직 오프셋( 양수 및 음수 값을 사용할 수 있음) 그림자 크기 그림자 확장 그림자 색상 값
그림자 유형은 생략할 수 있습니다. 기본값은 외부 투영입니다. 값이 삽입되면 내부 그림자 효과입니다.
X 수평 오프셋과 Y 수직 오프셋은 양수 및 음수 값을 가질 수 있습니다. X가 음수이면 왼쪽에 투영되고, 양수이면 오른쪽에 투영됩니다. Y가 음수이면 위쪽에 투영되고, 양수이면 아래쪽에 투영됩니다.
그림자 크기 및 확장 원리는 PS와 동일합니다.

브라우저 호환성:
모질라 커널 브라우저는 다음과 같이 작성됩니다(단, 새 버전의 Firefox를 추가할 필요는 없습니다).
- moz-box-shadow: 그림자 유형
-webkit-box-shadow: 그림자 유형:

<p class="shadow"></p>   
.shadow{   
 width:200px;   
 height:50px;   
 box-shadow:3px 3px 3px 3px #000;   
 /*-moz-box-shadow:3px 3px 3px 3px #000;    //以火狐为代表的mozilla内核浏览器，火狐现在的版本已经支持这个属性，所以不用再加-moz*/
 -webkit-box-shadow:3px 3px 3px 3px #000;   
}

렌더링:

상자 그림자 투영 유형을 삽입으로 변경, 렌더링:

예 2:

<p class="shadow"></p>   
.shadow{   
 width:200px;   
 height:50px;   
 box-shadow:0 -5px 5px 0 red,5px 0 5px 0 yellow,0 5px 5px 0 green,-5px 0 5px 0 blue;   
 /*-moz-box-shadow:0 -5px 5px 0 red,5px 0 5px 0 yellow,0 5px 5px 0 green,-5px 0 5px 0 blue;    //以火狐为代表的mozilla内核浏览器，火狐现在的版本已经支持这个属性，所以不用再加-moz*/
 -webkit-box-shadow:0 -5px 5px 0 red,5px 0 5px 0 yellow,0 5px 5px 0 green,-5px 0 5px 0 blue;   
}

렌더링:

text-shadow text-shadow

위에서 우리는 CSS3 레이어 섀도우 box-shadow에 대해 논의했습니다. 레이어 그림자 오늘 우리는 텍스트 그림자 효과를 얻는 방법을 함께 배울 것입니다. CSS3의 또 다른 속성인 텍스트 그림자는 각각 레이어와 텍스트의 질감을 향상시켜 3차원 효과를 만들어냅니다.

구문:

text-shadow ： none | <length> none | [<shadow>, ] * <shadow> 或none | <color> [, <color> ]*

text-shadow: X축 변위(양수 또는 음수), Y축 변위( 양수(음수일 수 있음), 그림자의 너비, 그림자의 색상 값

설명:

은 레이어 그림자와 유사하며 하나 이상 적용할 수도 있습니다. 쉼표로 구분된 동일한 객체에 대한 그림자 효과 세트입니다. X축 오프셋은 양수 또는 음수일 수 있습니다. X가 양수이면 오른쪽으로 오프셋되고, 음수이면 왼쪽으로 오프셋됩니다. Y축 오프셋은 양수 또는 음수일 수 있습니다. X가 양수이면 아래쪽으로 오프셋되고, 음수이면 위쪽으로 오프셋됩니다. 그림자의 색상 값은 #xxx, rgb 또는 rgba 투명 색상일 수 있습니다.

예: text-shadow

<h1 style="font-family:Microsoft Yahei; font-size:28px; color:#333; text-shadow:2px 2px 5px #f60;">雨打浮萍</h1>

표시 효과는 다음과 같습니다.

비교 상자-그림자

<h2 style="font-family:Microsoft Yahei; font-size:18px; color:#333; width:200px; line-height:30px; text-align:center; box-shadow:2px 2px 5px #f60;">专注于web前端开发</h2>

효과는 다음과 같습니다.

표시 효과는 다음과 같습니다

위 내용은 CSS3를 사용한 레이어 그림자 및 텍스트 그림자 효과에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!