CSS3의 box-shadow 속성을 사용하여 테두리 그림자 효과를 만드는 방법-CSS 튜토리얼-php.cn

CSS3의 box-shadow 속성을 사용하여 테두리 그림자 효과를 만드는 방법

高洛峰

풀어 주다： 2017-03-13 17:59:24

원래의

2778명이 탐색했습니다.

이 글에서는 테두리 그림자 효과를 생성하기 위한 CSS3 속성을 주로 소개합니다. box-shadow 속성은 여전히 그림자의 수평 또는 수직 위치를 설정할 수 있습니다. 색상과 크기에 대해서는 필요한 친구가

효과 데모를 참조할 수 있습니다.

CSS3의 box-shadow 속성을 사용하여 테두리 그림자 효과를 만드는 방법

box-shadow는 상자에 하나 이상의 그림자를 추가합니다. box-shadow 속성은 IE9+, Firefox 4, Chrome, Opera 및 Safari 5.1.1에서 지원됩니다.

구문:
코드는 다음과 같습니다.

box-shadow: h-shadow v-shadow blur spread color inset;

로그인 후 복사

h-shadow, v-shadow가 필수입니다. 수평 및 수직 그림자 위치. 할당이 허용됩니다. 선택 사항 흐림, 거리 흐림. 확산 옵션, 그림자의 크기. color 선택사항, 그림자의 색상입니다. inset은 선택 사항이며 외부 그림자(outset)를 내부 그림자로 변경합니다.

몇 가지 간단한 예를 살펴보겠습니다.

<body>
 <p class="box">
  <span class="caption">A</span>
 </p>

 <p class="box">
  <span class="caption">B</span>
 </p>

 <p class="box">
  <span class="caption">C</span>
 </p>

 <p class="box">
  <span class="caption">D</span>
 </p>

 <p class="box">
  <span class="caption">E</span>
 </p>

 <p class="box">
  <span class="caption">F</span>
 </p>

 <p class="box">
  <span class="caption">G</span>
 </p>

 <p class="box">
  <span class="caption">H</span>
 </p>
</body>

로그인 후 복사

먼저 간단하게 스타일을 설정합니다.

.box {   
 background-color: #fff;   
 border: 3px solid #ccc;   
 float: left;   
 margin: 20px 40px 0 0;   
 height: 65px;   
 width: 160px;   
 text-align: center;   
}   
.caption {   
 font-size: 20px;   
 position: relative;   
 top: 20px;   
}

로그인 후 복사

그런 다음 방법을 연습해 보겠습니다. 다양한 매개변수를 하나씩 사용합니다. 기본적으로 box-shadow를 사용할 때는 h-shadow와 v-shadow라는 두 가지 이상의 매개변수를 제공해야 합니다:

.box:nth-child(1) {   
 -webkit-box-shadow: 3px 3px #f3d42e;   
 -moz-box-shadow: 3px 3px #f3d42e;   
 box-shadow: 3px 3px #f3d42e;   
}

로그인 후 복사

변위 거리가 양수인 경우, 오른쪽이나 아래쪽으로 오프셋됩니다. 그렇지 않으면 왼쪽이나 위쪽으로 이동하세요.

CSS3의 box-shadow 속성을 사용하여 테두리 그림자 효과를 만드는 방법

흐림 반경 5px:

.box:nth-child(2) {   
 -webkit-box-shadow: 3px 3px 5px #f3d42e;   
 -moz-box-shadow: 3px 3px 5px #f3d42e;   
 box-shadow: 3px 3px 5px #f3d42e;   
}

로그인 후 복사

CSS3의 box-shadow 속성을 사용하여 테두리 그림자 효과를 만드는 방법

확산 거리는 실제 그림자 범위를 향상시킵니다.

.box:nth-child(3) {   
 -webkit-box-shadow: 3px 3px 0 5px #f3d42e;   
 -moz-box-shadow: 3px 3px 0 5px #f3d42e;   
 box-shadow: 3px 3px 0 5px #f3d42e;   
}

로그인 후 복사

변위 거리가 확산 거리에 추가되므로 값이 음수이면 그림자 범위가 줄어듭니다.

CSS3의 box-shadow 속성을 사용하여 테두리 그림자 효과를 만드는 방법

확산된 부분에도 흐림 효과가 있습니다.

.box:nth-child(4) {   
 -webkit-box-shadow: 3px 3px 5px 5px #f3d42e;   
 -moz-box-shadow: 3px 3px 5px 5px #f3d42e;   
 box-shadow: 3px 3px 5px 5px #f3d42e;   
}

로그인 후 복사

CSS3의 box-shadow 속성을 사용하여 테두리 그림자 효과를 만드는 방법

설정이 없는 경우 거리를 이동하면 블록 주변에서 블러 효과가 직접 노출됩니다.

.box:nth-child(5) {   
 -webkit-box-shadow: 0 0 15px #f3d42e;   
 -moz-box-shadow: 0 0 15px #f3d42e;   
 box-shadow: 0 0 15px #f3d42e;   
}

로그인 후 복사

CSS3의 box-shadow 속성을 사용하여 테두리 그림자 효과를 만드는 방법

플러스 확산 거리:

.box:nth-child(6) {   
 -webkit-box-shadow: 0 0 15px 5px #f3d42e;   
 -moz-box-shadow: 0 0 15px 5px #f3d42e;   
 box-shadow: 0 0 15px 5px #f3d42e;   
}

로그인 후 복사

CSS3의 box-shadow 속성을 사용하여 테두리 그림자 효과를 만드는 방법

또한, 사용 시 삽입 매개변수를 추가하면 원래는 블록 외부에 표시되는 그림자 효과는 내부 그림자 효과가 됩니다.

.box:nth-child(7) {   
 -webkit-box-shadow: 3px 3px #f3d42e inset;   
 -moz-box-shadow: 3px 3px #f3d42e inset;   
 box-shadow: 3px 3px #f3d42e inset;   
}

로그인 후 복사

주의 깊게 보셨나요? 원래 변위 거리가 양수이면 오른쪽이나 아래쪽으로 이동하지만 삽입 매개변수로 인해 효과가 반전됩니다.

CSS3의 box-shadow 속성을 사용하여 테두리 그림자 효과를 만드는 방법

블러 반경과 확산 거리를 추가합니다.

.box:nth-child(8) {   
 -webkit-box-shadow: 3px 3px 5px 5px #f3d42e inset;   
 -moz-box-shadow: 3px 3px 5px 5px #f3d42e inset;   
 box-shadow: 3px 3px 5px 5px #f3d42e inset;   
}

로그인 후 복사

CSS3의 box-shadow 속성을 사용하여 테두리 그림자 효과를 만드는 방법

여러 세트의 그림자 설정이 요소에 추가된 경우:

.box:nth-child(9) {   
 -webkit-box-shadow: 13px 13px #f3d42e, -10px 10px #33d42e, -5px -10px #ff0d2d, 10px -8px #034d5e;   
 -moz-box-shadow: 13px 13px #f3d42e, -10px 10px #33d42e, -5px -10px #ff0d2d, 10px -8px #034d5e;   
 box-shadow: 13px 13px #f3d42e, -10px 10px #33d42e, -5px -10px #ff0d2d, 10px -8px #034d5e;   
}

로그인 후 복사

섀도우의 계층관계는 레벨이 높을수록 먼저 설정된다는 것~

CSS3의 box-shadow 속성을 사용하여 테두리 그림자 효과를 만드는 방법