css 制作球体 |css表格底对齐代码

/* 定义全局变量 */
:root {
--color: #f26157; /* 球体颜色 */
--radius: 100px; /* 球体半径 */
}
/* 定义球体样式 */
.ball {
display: flex;
justify-content: center;
align-items: center;
width: var(--radius);
height: var(--radius);
border-radius: 50%;
background-color: var(--color);
box-shadow: -5px -5px 15px rgba(255, 255, 255, 0.3),
5px 5px 15px rgba(0, 0, 0, 0.3);
}
/* 定义球体上的光点 */
.ball::before {
content: "";
display: block;
width: 30%;
height: 30%;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 0 10px #fff;
}
/* 定义球体下的阴影 */
.ball::after {
content: "";
display: block;
width: 100%;
height: 20%;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.5);
box-shadow: inset 0 5px 10px #000;
}

通过上述代码，大家定义了一个全局变量--color和--radius，用于定义球体的颜色和半径。然后定义了.ball样式，用于设置球体的基本样式，包括圆形、颜色、阴影等。接下来，大家定义了球体上的光点.ball::before和球体下的阴影.ball::after。

最后，大家只需要在HTML中加入一个<div>标签，并设置class="ball"即可实现球体效果。

<div class="ball"></div>

以上就是制作CSS球体的全部内容，希望对大家有所帮助。