집 > 기사 > 웹 프론트엔드 > CSS3의 text-shadow 속성을 사용하는 방법

CSS3의 text-shadow 속성을 사용하는 방법

php中世界最好的语言원래의: 2018-01-22 10:47:462004검색

이번에는 CSS3의 text-shadow text-shadow 속성을 사용하는 방법과 CSS3 text-shadow text-shadow를 사용할 때 주의사항이 무엇인지 보여드리겠습니다. 바라보다.

텍스트 그림자 속성 특수 효과:

1. 오른쪽 아래 모서리 그림자, 왼쪽 아래 모서리 그림자, 왼쪽 위 모서리 그림자, 오른쪽 위 모서리 그림자

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>text-shadow</title>  
    <style>  
        p{   
          text-align:center;   
          margin:0;   
          font-family: helvetica,arial,sans-serif;   
          color:#999;   
          font-size:80px;   
          font-weight:bold;   
          text-shadow:10px 10px #333;   
        }   
    </style>  
</head>  
<body>  
    <p>Text Shadow</p>  
</body>  
</html>

텍스트 그림자를 다음으로 변경하는 경우: text-shadow:-10px 10px #333, 왼쪽 하단에 그림자가 나타납니다

text-shadow를 text-shadow:-10px -10px #333으로 변경하면 왼쪽 상단에 그림자가 나타납니다

text-shadow를 text로 변경합니다. -shadow: 10px -10px #333 , 오른쪽 상단에 그림자가 나타납니다

2. text-shadow를 사용하여 3차원 텍스트 효과를 설정하세요

<!DOCTYPE html>  
 <html lang="en">  
 <head>  
     <meta charset="UTF-8">  
     <title>text-shadow</title>  
     <style>  
         p{   
           text-align:center;   
           margin:0;   
           font-family: helvetica,arial,sans-serif;   
           color:#999;   
           font-size:80px;   
           font-weight:bold;   
           text-shadow:-1px -1px #fff,   
                                    1px 1px #333;   
         }   
     </style>  
 </head>  
 <body>  
     <p>Text Shadow</p>  
 </body>  
 </html>

이 사례를 읽으신 후에는 방법을 익히셨을 것입니다. 더 흥미로운 정보를 알고 싶으시면 PHP 중국어 웹사이트의 다른 관련 기사도 주목해 주세요!