CSS로 그림자 효과를 추가하는 방법은 무엇입니까? (코드 예)
- 青灯夜游원래의
- 2018-09-11 10:14:126113검색
CSS로 그림자 효과를 추가하는 방법은 무엇입니까? text-shadow 속성과 box-shadow 속성을 사용하여 추가할 수 있습니다. 다음 글에서는 text-shadow 속성과 box-shadow 속성이 어떻게 그림자 효과를 추가하는지 소개하겠습니다. 필요한 친구들이 참고하면 도움이 될 것입니다.
추천 매뉴얼: CSS3 최신 버전 참조 매뉴얼
One: 텍스트 그림자 효과 추가(text-shadow 속성)
1.
text-shadow는 텍스트에 그림자 추가를 지원하므로 CSS3 속성을 사용하여 이미지를 사용하지 않고도 디자인 중에 텍스트의 질감을 높일 수 있습니다. 현재 지원되는 브라우저에는 Firefox 3.1+, Safari 3+, Opera 9.5+ 및 기타 최신 브라우저가 포함됩니다. 물론, IE 계열에서는 이를 지원할 수 없습니다.
text-shadow:color length length length;
color:
예제의 양수 값:
text-shadow:0.1em 0.1em 0.3em #333333;
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>렌더링:
추천 관련 기사:
1.
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이면 그림자에 흐림 효과가 없음을 의미합니다.
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='#969696', 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!