CSS3의 box-shadow 속성 사용법에 대한 자세한 설명:
먼저 이해하려면 이름부터 시작하세요. Box-shadow는 두 부분으로 분해될 수 있습니다.
(1).box: div와 같은 상자 요소라고 부르는 상자를 나타냅니다.
(2).shadow: 투영의 의미.
그런 다음 이 속성은 요소의 그림자 효과를 설정하는 데 사용됩니다.
이 장에서는 코드 예제를 통해 box-shadow 속성의 사용법을 소개합니다.
구문 구조는 다음과 같습니다.
box-shadow:h-shadow v-shadow blur spread color inset;
매개변수 설명:
1.h-shadow: 필수, 요소 그림자의 수평 오프셋을 설정하며 음수 값이 될 수 있습니다. 단위는 픽셀입니다.
2.v-shadow: 필수, 요소 그림자의 수직 오프셋을 설정하며 음수 값일 수 있으며 단위는 픽셀입니다.
3.blur: 선택 사항, 그림자 흐림 반경. 양수만 가능합니다. 0인 경우 단위 픽셀 단위로 흐림 효과가 없음을 의미합니다.
4.spread: 선택사항, 그림자의 확장된 반경 크기(음수 값일 수 있음), 단위는 픽셀입니다.
5.color: 선택 사항입니다. 이 매개변수를 생략하면 브라우저는 기본 색상을 선택합니다. 일부는 투명하여 그림자 색상을 설정합니다.
6.inset: 선택 사항으로 외부 그림자를 내부 그림자로 변경할 수 있습니다.
코드 예:
예 1:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:green;
box-shadow:50px 50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>위 코드는 그림자의 가로 및 세로 오프셋만 설정하며 동시에 흐림 효과는 없습니다. 그림자 색상을 설정합니다. 브라우저는 기본 색상을 선택합니다. 일부는 검은색이고 일부는 투명합니다. 이 속성을 기본값으로 설정하지 않는 것이 좋습니다.
예 2:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:green;
box-shadow:50px 50px red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>위 코드는 div의 그림자 오프셋과 그림자 색상을 설정합니다.
예제 3
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:green;
box-shadow:50px 50px 10px red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>위 코드는 div 그림자의 가로 및 세로 오프셋, 흐림 반경 및 그림자 색상을 설정합니다.
예제 4:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:green;
box-shadow:50px 50px 10px 10px red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>위 코드는 div 그림자의 가로 및 세로 오프셋, 흐림 반경, 그림자 확장 반경 및 그림자 색상을 설정합니다.
예 5:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:green;
box-shadow:30px 10px 10px 10px red inset;
}
</style>
</head>
<body>
<div></div>
</body>
</html>위 코드는 div의 내부 그림자를 설정하고 다른 매개변수를 설정할 수 있습니다.
예 6:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:green;
box-shadow:30px 10px 10px 10px red,10px 20px 15px 10px blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
다음 섹션