CSS3 渐变(Gradients)之CSS3 径向渐变

2020-05-14 07:18:05易采站长站整理

}   
</style>  
</head>  
<body>  
    
<h3>径向渐变 – 形状</h3>  
<p><strong>椭圆形 Ellipse(默认):</strong></p>  
<div id="grad1"></div>  
<p><strong>圆形 Circle:</strong></p>  
<div id="grad2"></div>  
<p><strong>注意:</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>  
</body>  
</html>  

 (4)、不同尺寸大小关键字的使用
 
size 参数定义了渐变的大小。它可以是以下四个值:closest-side、farthest-side、closest-corner、farthest-corner
 
(5)、重复的径向渐变
 
repeating-radial-gradient() 函数用于重复径向渐变

XML/HTML Code复制内容到剪贴板

<!DOCTYPE html>  
<html>  
<head>  
<style>  
#grad1 {   
    height: 150px;   
    width: 200px;   
    background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%); /* Safari 5.1 – 6.0 */   
    background: -o-repeating-radial-gradient(red, yellow 10%, green 15%); /* Opera 11.6 – 12.0 */   
    background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%); /* Firefox 3.6 – 15 */   
    background: repeating-radial-gradient(red, yellow 10%, green 15%); /* 标准的语法(必须放在最后) */   
}   
</style>  
</head>  
<body>  
<h3>重复的径向渐变</h3>  
<div id="grad1"></div>  
<p><strong>注意:</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>  
</body>  
</html>