小編今天來(lái)分享一下怎么使用 CSS 寫(xiě)一個(gè)球。

/* 代碼開(kāi)始 */
/* 首先，讓我們創(chuàng)建一個(gè)球的容器 */
.ball {
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: red;
}
/* 對(duì)球體進(jìn)行陰影和亮度調(diào)整，讓它更具立體感 */
.ball::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border-radius: 50%;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2),
0 2px 5px rgba(0, 0, 0, 0.3);
opacity: 0.8;
}
/* 再添加高光，使球面更加光滑 */
.ball::after {
content: "";
position: absolute;
width: 50%;
height: 50%;
top: 20%;
left: 20%;
border-radius: 50%;
box-shadow: 0 0 50px rgba(255, 255, 255, 0.3);
}
/* 代碼結(jié)束 */

以上就是簡(jiǎn)單的 CSS 代碼，讓我們的球具備了基本的球形和立體感。可以根據(jù)需求再對(duì)顏色和大小進(jìn)行調(diào)整，歡迎大家去實(shí)踐!