CSS像皮球～～～
一脚踢到百货大楼～～
百货大楼卖皮球～～～
卖的全是CSS～～～～
先上效果图
代码以及注释
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
background-color: #f8f8f8; /* 白背景 */
font-size: 30px; /* 固定字体大小 */
}
body div {
position: fixed; /* 让球居中显示 */
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.ball {
padding: 1em; /*支撑球宽度 */
display: inline-block;
border-radius: 1em; /* 圆化 */
overflow: hidden; /* 白防止内容溢出 */
box-shadow: 10px 10px 10px #0004; /* 3D当然少不了阴影 */
background-color: #aaa; /* 环境反射颜色 */
}
.ball::before{
content: "";
background: #fff; /* 固有色 */
border-radius: 100%;
position: absolute;
left: -15%; /* 高光在左上角 */
top: -15%;
right: 5%;
bottom: 5%;
border: 0.3em solid #444; /* 交界线颜色 */
filter:blur(7px); /* 给个模糊 */
}
.ball::after{
content: "";
background: #fff; /* 高光颜色 */
border-radius: 100%;
position: absolute;
left: -10%;
top: -10%;
right: 10%;
bottom: 10%;
border: 0.5em solid #888; /* 亮部 */
filter:blur(7px);
}
</style>
</head>
<body>
<div class="ball">
</div>
</body>
</html>