📌  相关文章
📜  CSSradial-gradient()函数

📅  最后修改于: 2020-11-05 05:39:57             🧑  作者: Mango

CSSradial-gradient()函数

radial-gradient()是内置的CSS函数，可在两种或两种以上的颜色之间生成平滑过渡。它将径向渐变设置为背景图像。它可以是圆形或椭圆形。

它可以节省带宽使用量，并有助于减少下载时间。在径向渐变中，颜色从单个点出现，然后向外扩散。径向渐变由其中心点和结束形状以及两个或两个以上的色标定义。

句法

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

让我们讨论其论点。

position：定义渐变位置。其默认值为center。可以以单位(例如px，em等)或关键字(例如底部，左侧等)指定。

形状：它定义渐变的形状，可以是圆形或椭圆形。如果未指定其值，则将其设置为其默认值，即椭圆。

size：定义渐变大小。其可能的值为：

  • 最远的角落
  • 最远的一面
  • 最近角
  • 最近边

其默认值为最远角。

start-color，…。，last-color：它保存color的值，后跟一个可选的停止位置。

让我们尝试通过使用一些插图来了解radius-gradient()函数。

例1

  
  
      
        CSS Gradients  
          
      
      
        
  
            
Hello World

例2

在此示例中，我们将设置径向渐变的形状。

  
  
      
        CSS Gradients  
          
      
      
        
  
            
Hello World
  
            
Welcome to the javaTpoint.com

范例3

在此示例中，我们将设置径向渐变的大小。

  
  
      
        CSS Gradients  
          
      
      
    

        
  
            
farthest-side at left bottom
    
        
  
        
  
            
farthest-corner at right bottom
    
        
 
    
        
    
        
        
  
            
closest-side
    
        
  
        
  
            
closest-corner