<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯CSS绘制带阴影和高亮光效的逼真3D球体</title>
<style>
div {
margin: 20px;
display: inline-block;
}
body {
font-family: 'Cutive Mono';
text-align: center;
}
.sphere {
position: relative;
width: 150px;
height: 150px;
background: #3bf8fb;
border-radius: 50%;
box-shadow: inset 26px -37px 38px 42px rgba(5, 142, 144, 0.5), inset 9px -7px 35px -11px #9cfaff, inset 28px -21px 58px 4px rgba(0, 0, 0, 0.73);
}
.sphere::after {
background: rgba(4, 55, 56, 0.6);
top: 136px;
border-radius: 50%;
position: absolute;
height: 24px;
width: 150px;
left: -29px;
content: '';
z-index: -1;
-webkit-filter: blur(9px);
filter: blur(9px);
}
.sphere::before {
background: rgba(34, 110, 111, 0.57);
top: 143px;
border-radius: 50%;
position: absolute;
height: 14px;
width: 106px;
left: 8px;
content: '';
z-index: -1;
-webkit-filter: blur(4px);
filter: blur(4px);
box-shadow: -12px -4px 30px -1px #5c9fa0;
}
</style>
</head>
<body>
<div class="sphere"></div>
</body>
</html>
