>  기사  >  웹 프론트엔드  >  CSS의 테두리 그림자(box-shadow) 구현 방법 소개(코드 예)

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

不言
不言원래의
2018-11-09 10:34:314215검색

본 글에서 공유한 내용은 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의 테두리 그림자(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;
}
CSS의 테두리 그림자(box-shadow) 구현 방법 소개(코드 예)효과는 다음과 같습니다: 그림자가 착색되어 표시됩니다.

CSS에 대한 자세한 내용은 PHP 중국어 웹사이트의

CSS Video Tutorial

칼럼을 참조하세요. ! !

위 내용은 CSS의 테두리 그림자(box-shadow) 구현 방법 소개(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.