CSS의 테두리 그림자(box-shadow) 구현 방법 소개(코드 예)
- 不言원래의
- 2018-11-09 10:34:314226검색
본 글에서 공유한 내용은 CSS로 테두리 그림자를 구현하는 방법입니다. 내용이 매우 상세해서 도움이 필요한 친구들이 참고할 수 있습니다.
테두리에 그림자를 추가하기 위해 필요한 것은 box-shadow 속성입니다. box-shadow 속성의 구문 형식을 살펴보겠습니다.
box-shadow: (가로 방향의 거리) (세로 방향 거리) 거리) (그림자 흐림) (그림자 크기) (그림자 색상) (그림자 방향)
(그림자 흐림) (그림자 크기) (그림자 색상) (그림자 방향)을 생략하거나 다음 형식을 사용할 수 있습니다. (관련 권장사항: CSS 학습 매뉴얼)
box-shadow: (수평 방향의 거리) (수직 방향의 거리)
box-shadow: (수평 방향의 거리); 수직 방향) ( 그림자 흐림)
box-shadow: (수평 방향의 거리) (수직 방향의 거리) (흐릿한 그림자) (그림자 크기)
box-shadow: (수평 방향의 거리) 방향)(세로 방향의 거리) 거리)(그림자 흐림)(그림자 색상);
box-shadow :(가로 거리)(세로 거리)(그림자 흐림)(그림자 크기)(그림자 색상);
box-shadow :(가로 방향 거리)(세로 방향 거리)(그림자 흐림)(그림자 색상)(그림자 방향);
구문 예:
box-shadow：5px 5px 3px 1px＃000000 inset;
코드 예제를 살펴보겠습니다. 자세히:
SimpleShadow.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="SimpleShadow.css" />
</head>
<body>
<div class="SimpleFrame">php中文网</div>
</body>
</html>SimpleShadow.css
body {
background-color:#C0C0C0;
}
.SimpleFrame {
background-color: #FFFFFF;
margin-left: 128px;
margin-top: 64px;
width: 128px;
height: 220px;
box-shadow: 4px 4px 5px #404040;
}효과는 다음과 같습니다.
그림자 효과는 DIV의 컨테이너에 부착되어 그림자를 표시합니다.
그림자 흐림 정도를 설정할 때 CSS 코드를 다음과 같이 변경하세요. # 808080;
숫자가 클수록 그림자의 윤곽이 흐려지고 부드러운 그림자가 나타납니다.
그림자 크기 설정
SimpleShadow.css
body {
background-color:#C0C0C0;
}
.SimpleFrame {
background-color: #FFFFFF;
margin-left: 128px;
margin-top: 64px;
width: 128px;
height: 220px;
box-shadow: 4px 4px 0px #808080;
}그림자의 크기를 지정하면 외부에서 지정한 크기에 따라 그림자가 표시됩니다. 
그림자 방향 설정
CSS 코드는 다음과 같습니다. 
body {
background-color:#C0C0C0;
}
.SimpleFrame {
background-color: #FFFFFF;
margin-left: 128px;
margin-top: 64px;
width: 128px;
height: 220px;
box-shadow: 4px 4px 5px 10px #404040;
}효과는 다음과 같습니다: 그림자가 프레임 내부에 표시됩니다body {
background-color:#C0C0C0;
}
.SimpleFrame {
background-color: #FFFFFF;
margin-left: 128px;
margin-top: 64px;
width: 128px;
height: 220px;
box-shadow: 4px 4px 5px #404040 inset;
}
효과는 다음과 같습니다: 그림자가 착색되어 표시됩니다.
CSS에 대한 자세한 내용은 PHP 중국어 웹사이트의 CSS Video Tutorial
칼럼을 참조하세요. ! !위 내용은 CSS의 테두리 그림자(box-shadow) 구현 방법 소개(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!