IT培訓-高端面授IT培訓機構
        
          
            云和教育：云和數據集團高端IT職業教育品牌
            
        
          
    
          

          



          
    
          
        
          
                        
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
        
          
        
          
            
          
                
          
                    
            
                        
          • 
                            國家級
            全民數字素養與技能培訓基地            
                        
            • 
                        
          • 
                            河南省
            第一批產教融合型企業建設培育單位            
                        
            • 
                        
          • 
                            鄭州市
            數字技能人才（碼農）培養評價聯盟            
                        
            • 
                        
                    
          
                
          
            
          
        
          
    
          

          





          

          
    
          
        
                
          
            
          CSS3中怎樣為文本疊加單個或多個陰影效果?
          
            
            
                
          • 
                    
            發布時間：
            
                    
            2023-01-06
            
                
            • 
                
          • 
                    
            版權所有：
            
                    
            云和教育
            
                
            • 
                
          • 
                    
            分享：
            
                    
            
                        
                        
            
                            
                            
                            
                            
                            
                            
                            
                        
            
                        
                        
                    
            
                
            • 
            
          
            
          
                
          

          ext-shadow是CSS3新增屬性，該屬性可以為頁面中的文本添加陰影效果。text-shadow屬性的基本語法格式如下：
          

          選擇器{text-shadow:h-shadow v-shadow blur color;}
          

          在上面的語法格式中，h-shadow用于設置水平陰影的距離，v-shadow用于設置垂直陰影的p距離，blur用于設置模糊半徑，color用于設置陰影顏色。
          

          下面通過一個案例來演示text-shadow屬性的用法，如例所示。
          

          example.html
          

          <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>text-shadow屬性</title>
<style type="text/css">
P{
  font-size: 50px;
  text-shadow:10px 10px 10px red; /*設置文字陰影的距離、模糊半徑和顏色*/
}
</style>
</head>
<body>
<p>Hello CSS3</p>
</body>
</html>
          

          上述代碼中，第9行代碼用于為文字添加陰影效果，設置陰影的水平和垂直偏移距離為10px，模糊半徑為10px，陰影顏色為紅色。
          

          運行代碼效果如下圖所示：
          

          1672285506398_62.png
          

          可以看出，文本右下方出現了模糊的紅色陰影效果。此外，當設置陰影的水平距離參數或垂直距離參數為負值時，可以改變陰影的投射方向。
          

          注意：
          

          陰影的水平或垂直距離參數可以設為負值，但陰影的模糊半徑參數只能設置為正值，并且數值越大陰影向外模糊的范圍也就越大。
          

          設置多個陰影疊加效果
          

          我們可以使用text-shadow屬性給文字添加多個陰影，從而產生陰影疊加的效果。設置陰影疊加的方法非常簡單，我們只需設置多組陰影參數，中間用逗號隔開即可，例如，想要對段落設置紅色和綠色陰影疊加的效果，可以將p標簽的樣式更改為：
          

          P{
  font-size:32px;
  text-shadow:10px 10px 10px red,20px 20px 20px green; /*紅色和綠色的投影疊加*/
}
          

          在上面的代碼中，為文本依次指定了紅色和綠色的陰影效果，并設置了陰影的位置和模糊數值。陰影疊加效果如圖所示。
          

          1672285746121_63.png