이 글은 주로 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 중국어 홈페이지를 주목해주세요!
관련 추천:
css3를 사용하여 여러 요소를 순차적으로 표시하는 방법
CSS를 사용하여 배경을 만드는 방법 중복을 피하기 위해 이미지 늘리기 및 채우기 표시
위 내용은 CSS3 레이어 그림자 및 텍스트 그림자 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!