📜  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