집 > 기사 > 웹 프론트엔드 > Box-Shadow의 그림자 효과를 활용하는 방법

Box-Shadow의 그림자 효과를 활용하는 방법

php中世界最好的语言원래의: 2018-03-21 13:23:143011검색

이번에는 박스섀도우 효과 사용법과 박스섀도우 효과 사용시 주의사항에 대해 알려드리겠습니다.

box-shadow는 상자 가장자리에 그림자 효과를 주기 위해 사용되는 h5의 새로운 속성이라는 것은 누구나 알고 있습니다. 그러나 우리는 많은 장면에서 다양한 그림자 스타일을 자주 볼 수 있습니다. 오늘은 그림자 구현의 두 가지 방법을 알려 드리겠습니다.

1. 곡선형 엣지 섀도우

효과 그림은 다음과 같습니다. 주변에 그림자가 있을 뿐만 아니라 하단에 곡선형 엣지 섀도우 레이어도 있습니다. 먼저, 원리는 매우 간단합니다. 상자 자체에는 그림자가 있고 다른 그림자 상자를 사용하여 렌더링에서 곡선 그림자를 형성합니다.

먼저 box-shadow 구문에 대해 이야기해 보겠습니다. 다음과 같이 쉼표로 구분된 여러 그림자 작성을 지원합니다.

상자를 만들고 box-shadow를 사용하여 상자에 x-를 부여합니다. axis 및 y 축 방향은 블룸 반경이 10px인 외부 그림자와 내부 그림자입니다.

style{
      .box1{
                width: 400px;
                height: 200px;
                background: white;
                border: 1px solid lightgrey;
                margin: 100px auto;
                text-align: center;
                line-height: 200px;
                box-shadow: 0 0 10px rgba(0,0,0,0.3), 0 0 10px rgba(0,0,0,0.3) inset;
        }
}
body{
      <p class="box1">
      <span>曲边阴影</span>
      </p>
}

after pseudoclass 선택기를 사용하여 box1 하위 집합 뒤에 가상 라벨을 추가하면 브라우저가 이를 인식할 수 없습니다. 표시 속성을 정의하고 이 라벨에 그림자를 추가해야 합니다. 은 곡면이므로 곡률을 갖도록 테두리 반경을 설정해야 합니다. 그런 다음 위치 지정을 사용하여 가상 라벨을 원래 상자와 겹치게 하고 z-index를 사용하여 레벨을 p보다 낮도록 변경합니다. 코드는 다음과 같습니다

.box1::after{
                display: block;  //必须写
                content: "";     //必须写
                z-index: -1;
                width: 390px;
                height: 150px;
                background: red;
                position: absolute;
                bottom: 0;
                left: 4px;
                border-radius: 30px/10px;
                box-shadow: 0 8px 10px rgba(0,0,0,0.3);
                
            }

위치 지정이 없는 경우 두 개의 상자는 다음과 같이 배열됩니다.

위치 지정 후 곡선 모서리 그림자가 구현됩니다. 결과 그림은 다음과 같습니다.

2. 곡선 가장자리 그림자

원리는 곡선 가장자리 그림자와 동일합니다. 의사 클래스 선택기::afteryu 및 ::before를 사용하여 두 개의 가상 레이블을 추가하고 그림자의 겹침을 사용하여 곡선을 만듭니다. 가장자리 그림자.
코드는 다음과 같습니다.

.box2::after,.box2::before{
                display: block;
                content: "";
                z-index: -1;
                width: 170px;
                height: 240px;
                background: red;
                position: absolute;
                bottom: 20px;
                left: 38px;
                box-shadow: 30px 10px 40px rgba(0,0,0,0.5); 
                transform: skewX(-15deg);   
            }
            .box2::before{
                box-shadow: -20px 10px 40px rgba(0,0,0,0.5);    
                transform: skewX(15deg);    
            }

쉽게 볼 수 있도록 빨간색 배경을 제공합니다. 레벨을 변경하지 않은 결과는 다음과 같습니다.

두 상자의 레벨을 조정합니다. 효과는 다음과 같습니다.

이 기사의 사례를 읽었을 것입니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!