CSS의 테두리 그림자(box-shadow) 구현 방법 소개(코드 예)-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS의 테두리 그림자(box-shadow) 구현 방법 소개(코드 예)

Nov 09, 2018 am 10:34 AM

본 글에서 공유한 내용은 CSS로 테두리 그림자를 구현하는 방법입니다. 내용이 매우 상세해서 도움이 필요한 친구들이 참고할 수 있습니다.

테두리에 그림자를 추가하기 위해 필요한 것은 box-shadow 속성입니다. box-shadow 속성의 구문 형식을 살펴보겠습니다.

box-shadow: (가로 방향의 거리) (세로 방향 거리) 거리) (그림자 흐림) (그림자 크기) (그림자 색상) (그림자 방향)

(그림자 흐림) (그림자 크기) (그림자 색상) (그림자 방향)을 생략하거나 다음 형식을 사용할 수 있습니다. (관련 권장사항: CSS 학습 매뉴얼)

box-shadow: (수평 방향의 거리) (수직 방향의 거리)

box-shadow: (수평 방향의 거리); 수직 방향) ( 그림자 흐림)

box-shadow: (수평 방향의 거리) (수직 방향의 거리) (흐릿한 그림자) (그림자 크기)

box-shadow: (수평 방향의 거리) 방향)(세로 방향의 거리) 거리)(그림자 흐림)(그림자 색상);

box-shadow :(가로 거리)(세로 거리)(그림자 흐림)(그림자 크기)(그림자 색상);

box-shadow :(가로 방향 거리)(세로 방향 거리)(그림자 흐림)(그림자 색상)(그림자 방향);

구문 예:

1	`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의 테두리 그림자(box-shadow) 구현 방법 소개(코드 예)

그림자 흐림 정도를 설정할 때 CSS 코드를 다음과 같이 변경하세요. # 808080;

숫자가 클수록 그림자의 윤곽이 흐려지고 부드러운 그림자가 나타납니다.

그림자 크기 설정 CSS의 테두리 그림자(box-shadow) 구현 방법 소개(코드 예)

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의 테두리 그림자(box-shadow) 구현 방법 소개(코드 예)

그림자 방향 설정

CSS 코드는 다음과 같습니다. CSS의 테두리 그림자(box-shadow) 구현 방법 소개(코드 예)

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;
}