CSS灌籃是一種在前端開發(fā)中常用的技術,它可以讓網(wǎng)頁效果更加生動有趣。
.basketball { width: 200px; height: 200px; border-radius: 50%; background-color: orange; position: relative; } .basketball:before { display: block; content: ""; width: 75%; height: 75%; margin: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: #fff; border-radius: 50%; } .basketball:after { display: block; content: ""; width: 50%; height: 50%; margin: auto; position: absolute; top: 20%; left: 20%; border-radius: 50%; background-color: #000; transform: rotate(45deg); box-shadow: -10px -10px 15px rgba(0,0,0,.5); }
上面是一個簡單的CSS代碼示例,它可以讓一個div元素看起來像一個籃球。通過使用偽元素:before和:after的技巧,可以讓籃球表面看起來更加真實,并且加入了陰影效果讓籃球更加立體。