当前位置：首页 > news >正文

css3 渐变实例2径向渐变

news 来源：原创 2024/5/3 22:09:59

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	div{
		width:400px;
		height:200px;
		border:2px solid #fcf;
		padding:4px;
		/* 设计同心圆，圆心坐标(200,100) ，内圆半径10，外圆半径100 从内圆红色到外圆绿色径向渐变 */
		/* background:-webkit-gradient(radial, 200 100,10,200 100,100,from(red),to(green)); */

		/* 添加色标 */
		background:-webkit-gradient(radial,
			200 100,10,
			200 100,100,
			from(red),to(green),
			color-stop(80%,blue)
		);
			
			
		
		-webkit-background-origin:padding-box;
		-webkit-background-clip:content-box;
	}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	div{
		width:400px;
		height:200px;
		border:2px solid #fcf;
		padding:4px;
		/* 设计同心圆，圆心坐标(200,100) ，内圆半径10，外圆半径100 从内圆红色到外圆绿色径向渐变 */
		/* background:-webkit-gradient(radial, 200 100,10,200 100,100,from(red),to(green)); */

		/* 添加色标 */
		/* background:-webkit-gradient(radial,
			200 100,10,
			200 100,100,
			from(red),to(green),
			color-stop(80%,blue)
		); */

		/* 当内圆圆心和外圆圆心距离小于两元半径的差 会呈现锥形径向渐变效果 */
		background:-webkit-gradient(radial,
			120 100,10,
			200 100,100,
			from(red),to(green));
			
			
		
		-webkit-background-origin:padding-box;
		-webkit-background-clip:content-box;
	}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	div{
		width:400px;
		height:200px;
		border:2px solid #fcf;
		padding:4px;
		/* 设计同心圆，圆心坐标(200,100) ，内圆半径10，外圆半径100 从内圆红色到外圆绿色径向渐变 */
		/* background:-webkit-gradient(radial, 200 100,10,200 100,100,from(red),to(green)); */

		/* 添加色标 */
		/* background:-webkit-gradient(radial,
			200 100,10,
			200 100,100,
			from(red),to(green),
			color-stop(80%,blue)
		); */

		/* 当内圆圆心和外圆圆心距离小于两元半径的差 会呈现锥形径向渐变效果 */
		/* background:-webkit-gradient(radial,
			120 100,10,
			200 100,100,
			from(red),to(green)); */

			/* 设计球形效果 */
		 background:-webkit-gradient(radial,
			180 80,10,
			200 100,90,
			from(#00c),to(rgba(1,159,98,0)),
			color-stop(98%,#0cf));	
			
			
		
		-webkit-background-origin:padding-box;
		-webkit-background-clip:content-box;
	}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	div{
		width:200px;
		height:200px;
		border:2px solid #fcf;
		padding:4px;
	

			/* 设计多个气泡效果 */
			 background:-webkit-gradient(radial,
			60 45,10,
			52 50,60,
			from(#a7d30c),to(rgba(1,159,98,0)),
			color-stop(90%,#019f62)),

			 -webkit-gradient(radial,
			105 105,20,
			112 120,80,
			from(#ff5f98),to(rgba(255,1,136,0)),
			color-stop(75%,#ff0188)),

			 -webkit-gradient(radial,
			95 15,15,
			102 20,60,
			from(#00c9ff),to(rgba(0,201,255,0)),
			color-stop(80%,#00b5e2));
			
			
		
		-webkit-background-origin:padding-box;
		-webkit-background-clip:content-box;
	}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

转载于:https://www.cnblogs.com/mingjixiaohui/p/5369048.html