CSS로 그림자 효과를 추가하는 방법은 무엇입니까? (코드 예)-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS로 그림자 효과를 추가하는 방법은 무엇입니까? (코드 예)

青灯夜游

Sep 11, 2018 am 10:14 AM

box-shadowcsstext-shadow그림자 효과

CSS로 그림자 효과를 추가하는 방법은 무엇입니까? text-shadow 속성과 box-shadow 속성을 사용하여 추가할 수 있습니다. 다음 글에서는 text-shadow 속성과 box-shadow 속성이 어떻게 그림자 효과를 추가하는지 소개하겠습니다. 필요한 친구들이 참고하면 도움이 될 것입니다.

CSS로 그림자 효과를 추가하는 방법은 무엇입니까? (코드 예)

추천 매뉴얼: CSS3 최신 버전 참조 매뉴얼

One: 텍스트 그림자 효과 추가(text-shadow 속성)

1. text-shadow는 텍스트에 그림자 추가를 지원하므로 CSS3 속성을 사용하여 이미지를 사용하지 않고도 디자인 중에 텍스트의 질감을 높일 수 있습니다. 현재 지원되는 브라우저에는 Firefox 3.1+, Safari 3+, Opera 9.5+ 및 기타 최신 브라우저가 포함됩니다. 물론, IE 계열에서는 이를 지원할 수 없습니다.

2. text-shadow의 구문:

text-shadow:color length length length;

color:

length: 각각 "X축 방향, "길이, Y축 방향" 순서로 "길이 그림자 흐림 반경"은 부동 소수점 숫자와 단위 식별자로 구성된 길이 값을 나타냅니다. 음수 값(또는 0 값)일 수 있으며 그림자의 수평 확장 거리를 지정합니다. .

예제의 양수 값:

text-shadow:0.1em 0.1em 0.3em #333333;

text-shadow 속성의 첫 번째 값은 수평 변위를 나타내고, 두 번째 값은 수직 변위를 나타내며, 양수 값은 오른쪽 또는 아래쪽을 의미하고, 음수 값은 왼쪽 또는 위쪽을 의미하고, 세 번째 값은 흐림을 의미합니다. 반경(이 값은 선택 사항), 네 번째 값은 그림자의 색상을 나타냅니다(이 값은 선택 사항). 이 색상 값은 그림자 효과의 길이 값 앞이나 뒤에 배치될 수 있습니다. 색상을 지정하지 않으면 색상 속성 값이 대신 사용됩니다.

text-shadow 속성은 요소의 텍스트에 적용할 그림자 효과의 쉼표로 구분된 목록을 허용합니다. 그림자 효과는 주어진 순서대로 적용되기 때문에 서로 가릴 수는 있지만 텍스트 자체는 가릴 수 없습니다. 그림자 효과는 테두리의 크기를 변경하지 않지만 테두리를 넘어 확장될 수 있습니다.

3. 코드 예시

주로 사용되는 것은 text-shadow의 섀도우 리스트이며, 합리적인 컬러 매칭을 통해 원하는 효과를 얻을 수 있습니다.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>文字阴影效果</title>
		<style type="text/css">
		.demo{
			width: 600px;
			overflow: hidden;
			margin: 10px auto;
		}
		p {
			width: 300px;
			font-size: 3em;
			margin: 10px;
			padding: 20px;
			text-align: center;
		}
		
		.p1 {
			text-shadow: 0.2em 0.5em 0.1em #600, -0.3em 0.1em 0.1em #060, 0.4em -0.3em 0.1em #006;
			color: red;
		}
		
		.p2 {
			background: black;
			text-shadow: 0 -5px 4px #FF3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20;
			color: red;
		}
		
		.p3 {
			text-shadow: -1px -1px white, 1px 1px #333;
			color: #D1D1D1;
			font-weight: bold;
			background: #CCC;
		}
		
		.p4 {
			text-shadow: 1px 1px white, -1px -1px #333;
			color: #D1D1D1;
			font-weight: bold;
			background: #CCC;
		}
		
		.p5 {
			text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
			color: #ffffff;
			background: #CCC;
		}
		
		.p6 {
			text-shadow: 0 0 0.2em #F87, 0 0 0.2em #f87;
			color: #d1d1d1;
			background: #CCC;
		}
		</style>
	</head>

	<body>
		<div class="demo">
			<p class="p1">多色阴影效果</p>
			<p class="p2">火焰效果</p>
			<p class="p3">立体凸起效果</p>
			<p class="p4">立体凹下效果</p>
			<p class="p5">描边效果</p>
			<p class="p6">外发光效果</p>
		</div>

	</body>

</html>

렌더링:

추천 관련 기사:

CSS로 그림자 효과를 추가하는 방법은 무엇입니까? (코드 예) 1.

CSS에서 단면 그림자 효과를 얻는 방법

2.CSS3에서 상자 그림자를 얻는 방법은 무엇입니까? CSS3의 그림자 효과
관련 비디오 튜토리얼:
1.CSS 비디오 튜토리얼-Jade Girl Heart Sutra Edition

2. 상자(테두리) 그림자 효과 추가(상자-그림자 속성)

1 .box-shadow

E {box-shadow: 삽입 x-오프셋 y-오프셋 흐림 반경 확산 반경 색상};

E {box-shadow: 투영 모드 X축 오프셋 Y축의 구문 오프셋 그림자 흐림 반경 그림자 확장 반경 그림자 색상};값:

1. 그림자 유형: 이 매개변수는 선택 사항입니다. 기본 투영 방법은 "삽입" 값만 사용하는 경우 외부 그림자가 회전합니다.

2. 그림자의 수직 오프셋을 나타냅니다. 양수 값의 경우 그림자는 개체의 아래쪽에 있습니다.
4. 그림자 흐림 반경: 이 매개변수는 양수 값만 가능합니다. 값이 0이면 그림자에 흐림 효과가 없음을 의미합니다.

5. 그림자 확장 반경: 이 매개변수는 양수이거나 음수일 수 있습니다. 값이 양수이면 전체 그림자가 확장됩니다.

6. color: 이 매개변수는 선택사항입니다. 색상이 설정되지 않은 경우 브라우저는 기본 색상을 사용하지만 각 브라우저의 기본 색상은 다릅니다. 특히 웹킷 커널 아래의 Safari 및 Chrome 브라우저는 무색, 즉 투명합니다. 이 매개변수를 생략하지 않는 것이 좋습니다.

2. 호환성을 고려하세요

//Firefox4.0-
-moz-box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;
//Safari and Google chrome10.0-
-webkit-box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;
//Firefox4.0+ 、 Google chrome 10.0+ 、 Oprea10.5+ and IE9
box-shadow:  投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;

3. 코드 예시

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>box-shadow的用法</title>
		<style type="text/css">
			.demo {
				width: 800px;
				overflow: hidden;
				margin: 50px auto;
			}
			
			.demo * {
				width: 150px;
				height: 150px;
				margin: 40px 20px;
				background-color: grey;
				display: inline-block;
			}
			/*右下阴影*/
			
			.box-shadow-1 {
				-webkit-box-shadow: 3px 3px 3px;
				-moz-box-shadow: 3px 3px 3px;
				box-shadow: 3px 3px 3px;
			}
			/*四边同色阴影*/
			
			.box-shadow-2 {
				-webkit-box-shadow: 0 0 10px #0CC;
				-moz-box-shadow: 0 0 10px #0CC;
				box-shadow: 0 0 10px #0CC;
			}
			/*四边同色阴影扩展*/
			
			.box-shadow-3 {
				-webkit-box-shadow: 0 0 10px 15px #0CC;
				-moz-box-shadow: 0 0 10px 15px #0CC;
				box-shadow: 0 0 10px 15px #0CC;
			}
			/*四边同色内阴影*/
			
			.box-shadow-4 {
				-webkit-box-shadow: inset 0 0 10px #0CC;
				-moz-box-shadow: inset 0 0 10px #0CC;
				box-shadow: inset 0 0 10px #0CC;
			}
			/*四边异色外阴影*/
			
			.box-shadow-5 {
				box-shadow: -10px 0 10px red, /*左边阴影*/
				10px 0 10px yellow, /*右边阴影*/
				-10px 10px blue, /*顶部阴影*/
				10px 10px green;
				/*底边阴影*/
			}
			/*叠加异色阴影*/
			
			.box-shadow-6 {
				box-shadow: 0 0 10px 5px black, 0 10px 20px red;
			}
			/*兼容ie*/
			
			.box-shadow {
				filter: progid:DXImageTransform.Microsoft.Shadow(color=&#39;#969696&#39;, Direction=135, Strength=5);
				/*for ie6,7,8*/
				background-color: #ccc;
				-moz-box-shadow: 2px 2px 5px #969696;
				/*firefox*/
				-webkit-box-shadow: 2px 2px 5px #969696;
				/*webkit*/
				box-shadow: 2px 2px 5px #969696;
				/*opera或ie9*/
			}
		</style>
	</head>

	<body>
		<div class="demo">
			<div class="box-shadow-1">右下阴影</div>
			<div class="box-shadow-2">四边同色阴影</div>
			<div class="box-shadow-3">四边同色阴影扩展</div>
			<div class="box-shadow-4">四边同色内阴影</div>
			<div class="box-shadow-5">四边异色外阴影</div>
			<div class="box-shadow-6">叠加异色阴影</div>
			<div class="box-shadow">兼容ie</div>
		</div>
	</body>

</html>

렌더링:

위 내용은 CSS로 그림자 효과를 추가하는 방법은 무엇입니까? (코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.