CSS3 레이어 그림자 및 텍스트 그림자 사용

이 글은 주로 CSS3의 레이어 섀도우와 텍스트 섀도우의 사용을 소개합니다. 이제 특정 참조 가치가 있어 공유합니다. 도움이 필요한 친구들이 참고할 수 있습니다.

box-shadow 레이어 섀도우 속성 및 텍스트-섀도우 그림자 속성은 모두 X축 및 Y축 좌표계를 사용하여 그림자 확장을 제어합니다. 여기서는 CSS3 레이어 그림자 및 텍스트 그림자 효과의 사용에 대해 자세히 설명합니다.

box-shadow 레이어 섀도우

box-shadow: 섀도우 종류 인셋되면 내부 섀도우 효과입니다.
X 수평 오프셋과 Y 수직 오프셋은 양수 및 음수 값을 가질 수 있습니다. X가 음수이면 왼쪽에 투영되고, 양수이면 오른쪽에 투영됩니다. Y가 음수이면 위쪽에 투영되고, 양수이면 아래쪽에 투영됩니다.
그림자 크기와 확장은 PS와 동일합니다.

브라우저 호환성:
모질라 커널 브라우저는 다음과 같이 작성되었습니다(그러나 새 버전의 Firefox에서는 더 이상 추가할 필요가 없습니다): -moz-box-shadow: 그림자 유형 X 수평 오프셋( 양수 및 음수 값을 사용할 수 있음) Y 수직 오프셋(양수 및 음수 값을 사용할 수 있음) 그림자 크기 그림자 확장 그림자 색상 값
웹킷 커널 브라우저는 다음과 같이 작성됩니다.
-webkit-box-shadow: 그림자 유형 X 수평 오프셋(가능) 양수 및 음수 값 사용) Y 수직 오프셋(양수 및 음수 값 사용 가능) 그림자 크기 그림자 확장 그림자 색상 값

예 1:

<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 텍스트 그림자

위에서 그림 효과를 구현하기 위한 CSS3 레이어 그림자 상자 그림자에 대해 논의했습니다. 의 레이어 그림자 오늘은 CSS3의 또 다른 속성인 텍스트 그림자를 사용하여 레이어와 텍스트의 질감을 강화하고 3차원 효과를 만드는 방법을 알아봅니다.

구문:

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

text-shadow: 변위

레이어 그림자와 유사하게 하나 이상의 그림자 효과 세트를 동일한 개체에 쉼표로 구분하여 적용할 수도 있습니다. 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>

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

box-shadow 비교

<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>

효과는 다음과 같습니다.

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

위 내용은 이 글의 요약입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!
관련 추천:

CSS에서 투명도를 설정하기 위해 rgba와 불투명도를 사용하는 것의 차이점 분석

css3를 사용하여 여러 요소를 순차적으로 표시하는 방법

CSS를 사용하여 배경을 만드는 방법 중복을 피하기 위해 이미지 늘리기 및 채우기 표시

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