우리는 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 상자 그림자를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
