CSS3 텍스트 효과 속성 text-shadow 소개, 불꽃 텍스트 효과의 예-CSS 튜토리얼-php.cn

CSS3 텍스트 효과 속성 text-shadow 소개, 불꽃 텍스트 효과의 예

yulia

풀어 주다： 2018-09-08 16:14:01

원래의

3118명이 탐색했습니다.

이전에는 텍스트의 그림자 효과를 얻으려면 그림을 사용해야 했기 때문에 매우 불편했지만 이제는 CSS3 text-shadow를 통해 글꼴에 그림자를 추가하고 text-shadow에 해당하는 속성 값을 설정할 수 있습니다. 현재 필요한 부분이 있습니다. 글꼴 그림자 효과로 인해 그림 사용이 줄어듭니다. 다음에는 텍스트-섀도우 텍스트 섀도우 사용법을 설명하겠습니다.

1. text-shadow 작성 방법

text-shadow는 CSS3 스타일 속성으로, 텍스트 글꼴에 그림자 및 흐림 효과가 있는지 여부를 설정하는 CSS 스타일입니다.
구문: text-shadow: x-offset y-offset 흐림 색상
text-shadow의 매개변수는 다음과 같습니다:

x-offset: 필수, 수평 그림자 오프셋, 음수일 수 있음
y-offset: 필수, 수직 그림자 방향 오프셋, 음수 가능
blur: 선택 사항, 그림자 흐림 반경, 음수일 수 없음
color: 선택 사항, 그림자 색상

2. 텍스트 그림자의 간단한 사용법
예: 설정 div의 텍스트 그림자 클래스 이름 a1은 빨간색이고 그림자 거리는 왼쪽과 위쪽에서 각각 3px와 4px입니다. 그림자의 흐림 크기 범위는 5px이며 클래스 이름이 a2인 div의 텍스트 그림자는 검은색으로 설정됩니다. 거리는 왼쪽과 위쪽에서 각각 1px입니다.

html 코드:

<div>生活不止眼前的苟且</div>
<div class="a1">生活不止眼前的苟且</div>
<div class="a2">生活不止眼前的苟且</div>

로그인 후 복사

CSS 코드:

.a1{text-shadow:3px 4px 5px #F00 }
.a2{text-shadow:1px 1px 2px #000}

로그인 후 복사

사진 표시:

CSS3 텍스트 효과 속성 text-shadow 소개, 불꽃 텍스트 효과의 예

3.CSS3 텍스트 그림자 예

사용 CSS3의 텍스트 그림자는 텍스트 불꽃 효과에 비슷한 모양을 추가합니다.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">   
   .a1{width: 200px;height: 200px;background: #000000;text-align: center;line-height: 200px;font-size:40px; font-weight:bold;  
              text-shadow:0 0 4px white,    
                                0 -5px 4px #ff3,   
                                3px -10px 6px #fd3,    
                                -3px -15px 11px #C90,   
                                3px -25px 18px #f20;
                                }
  </style>
 </head>
 <body>
  <div class="a1">延禧攻略</div>
 </body>
</html>

로그인 후 복사

Rendering: