집 > 기사 > 웹 프론트엔드 > CSS3 상자 그림자를 사용하는 방법

CSS3 상자 그림자를 사용하는 방법

php中世界最好的语言원래의: 2017-11-24 09:22:201846검색

우리는 CSS3에서 box-shadow가 boxshadow 스타일 단어라는 것을 알고 있으므로 오늘은 box-shadow가 어떻게 사용되는지 살펴보겠습니다. 여기에 작은 예가 있습니다.

boxshadow 스타일 단어: box-shadow

Syntax

div{box-shadow:0 0 1px #000 inset;}

왼쪽 0, 위쪽 0, 1px의 테두리 간격을 나타냅니다. 그림자 범위 그림자 색상은 검정색(#000)이고, 삽입은 그림자를 나타냅니다. 상자 내에서는 삽입 없이 상자 외부의 그림자를 나타냅니다.

참고:

box-shadow:0px 0px 1px #000

첫 번째 값이 0이면 왼쪽 및 오른쪽 테두리의 그림자가 1px 범위라는 의미입니다.

첫 번째 값은 양수정수를 나타냅니다. 왼쪽 테두리의 그림자

첫 번째 값은 오른쪽 테두리의 그림자를 나타내는 음의 정수입니다

마찬가지로

두 번째 값은 위쪽 및 아래쪽 테두리의 그림자를 나타내는 0입니다

두 번째 값은 양의 정수입니다. 위쪽 테두리에서 1px 그림자의 거리를 나타냅니다

첫 번째 값은 음수입니다. 정수는 아래쪽 테두리 그림자 설정

을 나타내며 DIV 상자와 pictureIMG에 대해 각각 내부 그림자와 외부 그림자를 설정합니다.

1. Case HTML code

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>对象阴影 在线演示 </title> 
<link href="images/style.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<div>盒子对象阴影测试</div> 
<div class="box">DIV盒子内阴影</div> 
<div>图片对象阴影测试</div> 
<div class="box2"><img src="images/div-logo.gif" /></div> 
</body> 
</html>

2. Case CSS code

.box {box-shadow:5px 2px 6px #000 inset; width:300px; height:80px; margin:0 auto} 
.box2 img {box-shadow:5px 2px 6px #000}

CSS3의 box-shadow 사용법은 여기까지입니다. 더 흥미로운 내용을 보려면 php Chinese 웹사이트Other에 주목하세요!

CSS3 상자 그림자를 사용하는 방법

관련 기사