CSS3 用径向渐变(radial-gradient)模拟立体感的球体

最新推荐文章于 2024-08-29 22:00:39 发布

houyanhua1

最新推荐文章于 2024-08-29 22:00:39 发布

阅读量2k

点赞数 1

本文链接：https://blog.csdn.net/houyanhua1/article/details/79657471

版权

CSS 同时被 3 个专栏收录

65 篇文章 1 订阅

订阅专栏

HTML5

54 篇文章 1 订阅

订阅专栏

CSS3

33 篇文章 0 订阅

订阅专栏

demo.html：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>

		div {
			width: 300px;
			height: 300px;
			background-color: red;
			border-radius: 50%;
			margin: 100px auto;

			/* 立体感的球体。 用background-image否则会覆盖掉背景色,径向渐变的颜色有透明度 */
			background-image: radial-gradient(at 80px 80px, rgba(0,0,0,0), rgba(0,0,0,0.6));
		}

	</style>
</head>
<body>
	<div class="box"></div>
</body>
</html>