CSS3를 사용하여 곡선 그림자 및 가장자리 뒤틀림 그림자를 구현하는 방법에 대한 그래픽 및 텍스트 코드 튜토리얼

특수한 그림자 효과를 적용할 때 사진을 배경으로 사용하는 방법은 실제로 매우 열악합니다. 이전 버전의 브라우저에 적응하지 않고도 CSS3를 사용하여 원하는 그림자 스타일을 사용자 정의할 수 있습니다.

다음에서는 그림자를 사용자 정의하는 과정을 설명하기 위해 곡선 그림자와 가장자리 뒤틀림 그림자를 예로 들어 보겠습니다.
먼저 렌더링을 살펴보겠습니다

곡선 그림자

곡선 그림자는 실제로 이중 그림자를 겹쳐서 얻을 수 있습니다.
그림자를 제거한 상태로 그림을 분해하면 이해하기가 더 쉬울 것입니다.


위 그림과 같이 그림 1의 기본 그림자 아래에 곡선 그림자를 추가하면 됩니다.
1. 그림 1의 기본 그림자는 구현하기 쉽습니다. 내부 그림자 + ​​외부 그림자

.box-shadow1{    
box-shadow: 0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
}

2. 그런 다음 의사 클래스를 사용하여 요소 뒤에 "적응 가능한" 그림자를 추가해야 합니다. 상대 위치 지정, 구현 코드는 다음과 같습니다

.box-shadow1{    
position:relative;    
box-shadow: 0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;}.box-shadow1:after{    
content:"";    
position:absolute;    
background:transparent;    
top:50%; 
//设置宽高仅仅设置上下左右边距是为了让系统自动定位。    
bottom: 1px;    
left: 10px;    
right: 10px; 
    z-index: -1; 
    //将副阴影置于主阴影下    
    box-shadow: 0 0 20px rgba(0,0,0,0.7); 
    border-radius: 100px/10px;}

이런 방식으로 곡선 그림자 효과를 얻을 수 있습니다.

<p class="box box-shadow1">将box-shadow1作为类使用即可</p>

뒤틀린 그림자

같은 방법으로 기본 그림자 아래 두 개의 평행사변형에 뒤틀린 그림자를 겹칠 수 있습니다.
여기서는 더 이상의 설명 없이 분해도와 소스코드로 바로 넘어가겠습니다

.box-shadow2{    
position:relative;    
box-shadow: 0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;}
.box-shadow2:before,.box-shadow2:after{    
content: "";    
position:absolute; 
    top:20px;bottom: 22px;  
    background: transparent; 
    box-shadow: 0 8px 20px rgba(0,0,0,0.7);  
    z-index: -1; 
    background: #fff; 
}.box-shadow2:before{ 
    left: 22px;  
    right:12px; 
    transform: skew(-12deg) rotate(-4deg); 
}.box-shadow2:after{  
    left: 12px;  
    right:22px; 
    transform: skew(12deg) rotate(4deg); 
}

위 내용은 CSS3를 사용하여 곡선 그림자 및 가장자리 뒤틀림 그림자를 구현하는 방법에 대한 그래픽 및 텍스트 코드 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!