<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS背景色徑向漸變</title>
<style>
#grad1{
height: 150px;
width: 200px;
/* border-radius: 500px;*/ /* 這里不能設置圓角,長寬不一致效果沒顯示 */
background: -webkit-radial-gradient(red,yellow, green);
background: -o-radial-gradient(red,yellow, green);
background: -moz-radial-gradient(red,yellow, green);
background: radial-gradient(Ellipse,red,yellow, green);
/* circle 圓形 默認為橢圓 Ellipse */
}
#grad2{
height: 200px;
width: 200px;
border-radius: 200px; /*邊框圓角 200px:指定圓角半徑 最后顯示為一個圓太陽 */
background: -webkit-radial-gradient(red,yellow, green);
background: -o-radial-gradient(red,yellow, green);
background: -moz-radial-gradient(red,yellow, green);
background: radial-gradient(circle,red,yellow, green);
/* circle 圓形 默認為橢圓 Ellipse */
}
</style>
</head>
<body>
<h3>徑向漸變--顏色結點均勻分布(橢圓)</h3>
<div id="grad1"></div>
<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持漸變。</p>
<br/>
<hr color="red">
<h3>徑向漸變--顏色結點均勻分布(圓)</h3>
<div id="grad2"></div>
<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持漸變。</p>
<br/>
</body>
</html>
