[프런트 토킹] CSS 시리즈-css3의 box-shadow 소개

1. 앞에 쓴다
CSS3에서 box-shadow 속성을 사용하여 음영 효과를 만들어 2차원 평면에 깊이 효과를 증가시킬 수 있다. 이 속성은 전방 개발에서 매우 많이 사용된다. 예를 들어segmentfault의 첫 페이지에서 box-shadow 속성을 사용하여 깊이 효과를 증가시킨다. 오늘 우리는 이 속성을 함께 살펴보자.
2. box-shadow의 기본 문법
box-shadow: [x-offset y-offset blur-radius spread-radius color,inset ]+
그 중에서 +는 정규 표현식에서 한 번 또는 여러 번의 뜻을 나타낸다. 즉, box-shadow는 여러 개의 음영을 동시에 설정하는 것을 지원할 수 있다.
먼저 기본 매개변수의 의미를 살펴보겠습니다.

none: 기본값, 설정 후 음영 효과가 없음;

inset: 이 값은 내음영을 표시하고 설정하지 않으면 외음영을 기본적으로 표시합니다.

x-offset/y-offset: 음영이 수평방향과 수직방향에서의 편이량을 각각 나타내고 정치와 음값의 설정을 지원하며 정치는 오른쪽 아래에서 편이를 나타내고 음값은 왼쪽 위에서 편이를 나타낸다.

blur-radius: 음영의 모호한 거리는 0 또는 정치만 설정할 수 있고 값이 클수록 음영의 가장자리가 모호하다는 것을 나타낸다.

spread-radius: 음영의 확장 반경(생략 가능, 기본값 0), 양수와 음수 지원, 양수는 음영의 확장, 음수는 음영의 축소를 나타낸다.이 속성은box-shadow에서 상대적으로 이해하기 어려운 속성으로 문장 뒤에 이 속성의 의미를 상세하게 설명한다.

color: 섀도우 색상을 설정하지 않으면 브라우저의 기본 색상이 사용됩니다.

box-shadow의 매개 변수를 설명한 후에도 여러분은 개념이 없어서 어떻게 사용해야 할지 몰랐을 것입니다.먼저 여러분이 자주 사용하는 box-shadow 방법을 살펴보겠습니다. 세 개의 길이 값과 한 개의 색 값을 지정하여 음영 효과를 실현하는 방법은 다음과 같습니다.

 box-shadow: 2px 3px 4px rgba(0,0,0,.5);

브라우저의 효과는 다음과 같습니다.
결국 우리는 왼쪽과 밑의 테두리 음영의 효과를 실현했지만 박스-shadow가 음영을 그리는 원리가 무엇인지 생각해 보셨나요?그리기 원리는 다음 절을 보십시오.
3. box-shadow 그림자를 그리는 원리
다음 그림에서는 섀도우가 어떻게 그려지는지 다음 코드의 예를 들어 그래픽으로 보여 줍니다.

.box{
  width: 200px;
  height: 200px;
  background-color: #fb3;
  box-shadow: 2px 3px 4px rgba(0,0,0,.5);
}

그러면 그림자를 그리는 단계는 다음 단계로 진행됩니다.
(1) 이 원소와 같은 사이즈와 위치로 rgb(0,0,0,.5)의 직사각형을 그린다. 아래 그림1과 같다.
(2) 그림1의 직사각형을 오른쪽으로 2px, 아래로 3px로 옮긴다. 아래 그림2와 같다.
(3) 고스 모호 알고리즘(또는 유사한 알고리즘)을 사용하여 4px의 모호 처리를 한다. 본질적으로 음영 가장자리에 음영색과 순투명색 사이의 색 과도 길이가 모호 반경의 두 배에 가깝다는 것을 나타낸다. 아래 그림3과 같다.
(4) 희미한 후 사각형과 원시 원소의 교차 부분은 절제되기 때문에 마지막으로 보이는 음영 효과는 아래 그림 4와 같다. 즉, 우리가 최종적으로 본 음영 효과이다.
정확히 말하면 우리는 꼭대기에서 1px의 음영(4px-3px), 왼쪽에서 2px(4px-2px), 오른쪽에서 6px(4px+2px), 밑에서 7px(4px+3px)를 볼 수 있다.실천에서 투영은 이 값보다 조금 작아 보일 수 있다. 왜냐하면 투영의 색깔이 가장자리에서 선형이 아니기 때문이다.
box-shadow의 그리기 원리를 설명하였으며, 다음은 예를 결합하여 box-shadow의 모든 속성에 대해 상세한 설명을 할 것이다
4.box-shadow 속성 설명
4.1 x-offset
x-offset은 그림자가 수평 방향에서 이동하는 양을 설명합니다.만약 정수라면 그림자는 원소의 오른쪽에 있다.음수이면 요소의 왼쪽에 그림자가 나타납니다.코드는 다음과 같습니다.

box-shadow: 10px 0 5px 0 rgba(0,0,0,.5);

box-shadow: -10px 0 5px 0 rgba(0,0,0,.5);

브라우저의 효과는 다음과 같습니다.
첫 번째 그림에서 x-offset을 10px로 설정하여 오른쪽에 음영이 생겼다.두 번째 그림에서 x-offset을 -10px로 설정하면 왼쪽에 음영이 생긴다.
4.2 y-offset
y-offset은 섀도우의 수직 방향 오프셋을 선언하는 데 사용됩니다.정수인 경우 요소의 네모난 면에 그림자가 나타납니다.음수이면 요소 위에 그림자가 나타납니다.코드는 다음과 같습니다.

box-shadow: 0 10px 5px 0 rgba(0,0,0,.5);

box-shadow: 0 -10px 5px 0 rgba(0,0,0,.5);

브라우저의 효과는 다음과 같습니다.
첫 번째 그림에서 y-offset을 10px로 설정하여 밑에 음영이 생겼다.두 번째 그림에서 y-offset을 -10px로 설정하면 맨 위에 음영이 생긴다.
4.3 blur-radius
blur-radius는 음영의 모호한 반경을 나타낸다. 값이 클수록 음영이 모호하고 이 속성은 마이너스를 지원하지 않는다.코드는 다음과 같습니다.

box-shadow: 0 0 0 0 rgba(0,0,0,.5);

box-shadow:  0 0 20px 0 rgba(0,0,0,.5);

box-shadow:  0 0 50px 0 rgba(0,0,0,.5);

첫 번째 그림에서 x-offset, y-offset,blur-radius를 0px로 설정하면 위치를 바꾸지 않고 모호하지 않으면 음영의 효과가 없다.두 번째 그림에서blur-radius를 20px로 설정하고 세 번째 그림에서 사회팀blur-radius를 50px로 설정하면 blur-radius의 값이 클수록 그늘이 희미해지는 것을 볼 수 있다.
4.4 spread-radius
이 속성은box-sizing에서 가장 이해하기 어려운 것이다.먼저 다음과 같은 예를 살펴보겠습니다.

box-shadow: 0px 0px 0px 20px deeppink;

20px의 경계 효과를 볼 수 있습니다:
그리고 Blur-radius를 동적으로 바꾸면 희미한 것은 테두리 부분이고 색깔도 deeppink인 테두리를 볼 수 있습니다.
사실 우리는spread-radius를 원소blur의'margin'으로 이해하고 정시에 점차적으로 밖으로 확장되고 마이너스일 때 점차적으로 안으로 수축할 수 있다.
4.5 color
color는 음영의 색을 표시합니다. css의 임의의 색을 지원합니다.코드는 다음과 같습니다.

.box1{
  box-shadow: 0 0 50px 0 darkgreen;
}
.box2{
  box-shadow:  0 0 50px 0 deeppink;
}
.box3{
  box-shadow:  0 0 50px 0 blue;
}

세 폭의 그림에서 그림자를 설정하는 색이 각각 다르면 그에 상응하는 그림자 효과가 발생한다.
4.6 inset
섀도우는 기본적으로 외부 섀도우이며 inset 키워드를 사용하여 외부 섀도우로 지정할 수 있습니다.코드는 다음과 같습니다.

.box1{
  box-shadow: 0 0 50px 0 darkgreen inset;
}
.box2{
  box-shadow:  0 0 50px 0 deeppink inset;
}
.box3{
  box-shadow:  0 0 50px 0 blue inset;
}

브라우저의 효과는 다음과 같습니다.
세 폭의 그림에서 음영을 내부 음영으로 설정하고 최종 음영은 요소 내부에서 생성된다.
5.box-shadow 속성의 사례
5.1 한면 투영
코드는 다음과 같습니다.

box-shadow:  0 5px 4px -4px blue;

5.2 양면 투영
원소의 두 가장자리에 음영만 설정하고 싶을 때, 비교적 번거로운 것 같다.반경을 확장하는 것은 네 방향에서 균등한 작용을 하기 때문에 (즉, 수평 방향에서 투영하는 것을 확대하고 수직 방향에서 축소하는 것을 지정할 수 없다) 유일한 방법은 두 개의 투영(각 변마다 한 조각)으로 목적을 달성하는 것이다.기본적으로 다음과 같이 한면 투영의 기법을 두 번 적용합니다.

 box-shadow:  5px 0 5px -5px blue,
                -5px 0 5px -5px blue;

브라우저의 효과는 다음과 같습니다.
5.3 아날로그 프레임
box-shadow 속성을 사용하여 border의 효과를 다음과 같이 시뮬레이션할 수 있습니다.

.box{
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: #fb3;
}
.box6 {
  box-shadow: 0px 0px 0px 40px deeppink;
}

.box7 {
  box-shadow: 20px 20px 0px 20px blue,
    -20px -20px 0px 20px deeppink,
    0px 0px 0px 40px darkgreen;
}

브라우저의 효과는 다음과 같습니다.
box-shadow 속성을 이용하여border의 효과를 시뮬레이션할 수 있지만,border와 달리 box-shadow로 만든 테두리 효과는 요소의 사이즈에 영향을 주지 않습니다.우리는 요소의 사이즈를 200*200로 지정하고 box-shadow를 이용하여border의 효과를 시뮬레이션했지만 브라우저에서 요소의 사이즈는 여전히 200*200인 것을 볼 수 있다. 아래 그림과 같다.
5.4 사용자 가까이와 멀리 떨어진 효과 에뮬레이션
box-shadow와 애니메이션 속성을 이용하여 사용자에게 접근하고 멀리하는 효과를 다음과 같이 시뮬레이션할 수 있습니다.

.box{
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: #fb3;
}
.popup {
  transform: scale(1);
  box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
  transition: box-shadow 0.5s, transform 0.5s;
}
.popup:hover {
  transform: scale(1.3);
  box-shadow: 0px 0px 50px 10px rgba(0, 0, 0, 0.3);
  transition: box-shadow 0.5s, transform 0.5s;
}

브라우저의 효과는 다음과 같습니다.
5.5 부동 효과 시뮬레이션
box-shadow와 애니메이션 속성을 함께 사용하면 다음과 같이 사용자에게 접근하고 멀리 떨어지는 효과를 시뮬레이션할 수 있습니다.

.easy {
  position: relative;
  transform: translateY(0);
  transition: transform 1s;
}
.easy:after {
  content: "";
  display: block;
  position: absolute;
  bottom: -30px;
  left: 50%;
  height: 8px;
  width: 100%;
  box-shadow: 0px 0px 20px 0px deeppink;
  border-radius: 50%;
  background-color: deeppink;

  transform: translate(-50%, 0);
  transition: transform 1s;
}
/*      */
.easy:hover {
  transform: translateY(-40px);
  transition: transform 1s;
}
/*        */
.easy:hover:after {
  transform: translate(-50%, 40px) scale(0.75);
  transition: transform 1s;
}

브라우저의 효과는 다음과 같습니다.
5.6 책장 효과 시뮬레이션
box-shadow와 애니메이션 속성(회전)을 함께 사용하면 아래의 종이 효과를 실현할 수 있다. 왼쪽 아래와 오른쪽 아래의 음영이 중간의 음영보다 두드러진다.
위의 책장 효과를 어떻게 만드는지 단계별로 살펴보겠습니다. 다음과 같은 공통적인 양식이 있습니다.
다음과 같은 공통 스타일이 있습니다.

.box{
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: #fb3;
}

구체적인 단계는 다음과 같습니다.
(1) 일반div와 위조 요소를 이용하여 음영 효과의 케이스를 만들고 그 중에서 편의를 보여주기 위해border 속성을 추가하여 최종적으로border를 제거한다.

.page{
  position: relative;
}
.page:before, .page:after{
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  border: 1px solid #cd0000;
}
.page:after {
  right: 10px;
  left: auto;
}

브라우저의 효과는 다음과 같습니다.
(2) 위조 요소의 음영 효과와 일정한 각도를 회전시켜 다음과 같은 코드로 수정한다.

.page{
  position: relative;
}
.page:before, .page:after{ 
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  border: 1px solid #cd0000;
  box-shadow: 0 15px 10px #777;/*  ，  */
  transform: rotate(-3deg);/*  ，  */
}
.page:after {
  transform: rotate(3deg);/*  ，  */
  right: 10px;
  left: auto;
}

브라우저의 효과는 다음과 같습니다.
(3) 사용z-index:-1으로 위조 요소를 숨기고 효과를 설명하기 위한border 속성을 제거하면 최종 효과는 우리가 원하는 책장 효과입니다.

.page{
  position: relative;
}
.page:before, .page:after{
  z-index: -1;/*  */
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  /*border: 1px solid #cd0000;*/        
  box-shadow: 0 15px 10px #777;
  transform: rotate(-3deg);
}
.page:after {
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

브라우저의 효과는 다음과 같습니다.
6. 마지막에 쓴다
css에서 css의 속성은 상대적으로 적지만 처음에 접촉할 때 추상적이다. 특히 반경을 확장한다. 내가 처음 접촉했을 때도 이해하기 어려웠지만 인터넷의 일부 블로그 작가의 예에 따라 직접 예를 써서 효과를 관찰하면 이해하기 쉽다.박스-shadow의 MDN과 W3C에 대해 더 깊이 알고 싶다면, 박스-shadow 효과를 온라인으로 볼 수 있는 css3gen도 있다.
읽어주셔서 감사합니다.
7. 참조 링크
box-shadow 속성
만났습니다. 제 위챗 공식 계정인'프런트 토킹'에 주목해 주십시오.