径向渐变（圆形）示例

2021-10-20 16:19

310

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>
			菜鸟教程(runoob.com)
		</title>
		<style>
			#grad1 { height: 150px; width: 200px; background: -webkit-radial-gradient(#f7602a,
			#e63b24, #cc001b); /* Safari 5.1 - 6.0 */ background: -o-radial-gradient(#f7602a,
			#e63b24, #cc001b); /* Opera 11.6 - 12.0 */ background: -moz-radial-gradient(#f7602a,
			#e63b24, #cc001b); /* Firefox 3.6 - 15 */ background: radial-gradient(#f7602a,
			#e63b24, #cc001b); /* 标准的语法（必须放在最后） */ }
		</style>
	</head>
	<body>
		<h3>
			径向渐变 - 颜色结点均匀分布
		</h3>
		<div id="grad1">
		</div>
		<p>
			<strong>
				注意：
			</strong>
			Internet Explorer 9 及之前的版本不支持渐变。
		</p>
	</body>

</html>

CSS 渐变