섀도우박스-섀도우

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>

지속적인 학습

새로운 파일

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

제출하다 코드 재설정

자동운전