css3實現(xiàn)球體的方法：1、創(chuàng)建一個寬高相等的正方形元素，使用border-radius屬性將其設(shè)置為圓形；2、使用“background:radial-gradient(…)”語句給圓形元素添加一個徑向漸變的背景顏色即可實現(xiàn)球體效果。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

css3實現(xiàn)球體的步驟：

1、基本形狀

我們先來實現(xiàn)一個基本的圓，HTML 代碼如下：

<figure class="circle"></figure>

　這里使用的是 HTML5 新增標簽 figure，也可以用其它標簽。figure 標簽專門用于顯示網(wǎng)頁中的圖片或者其它圖表內(nèi)容。為了實現(xiàn)圓型效果，添加一些基礎(chǔ)的樣式：

.circle { display: block; background: black; border-radius: 50%; height: 300px; width: 300px; margin: 0; }

2、徑向漸變

上面實現(xiàn)了基本的圓形效果，這里增加徑向漸變效果來實現(xiàn)更逼真的球體。

.circle {   display: block;   background: black;   border-radius: 50%;   height: 300px;   width: 300px;   margin: 0;   background: -webkit-radial-gradient(100px 100px, circle, #5cabff, #000);   background: -moz-radial-gradient(100px 100px, circle, #5cabff, #000);   background: radial-gradient(100px 100px, circle, #5cabff, #000); }

3、添加陰影增強立體感

上節(jié)已經(jīng)有基本的球體效果出來了，為了增加立體效果，我們在球的底部加個陰影，這樣立體感就更強了。

這里用到的 HTML 代碼如下：

<section class="stage"> 	<figure class="circle"><span class="shadow"></span></figure> </section>

CSS 代碼如下：

.stage { 				width: 300px; 				height: 300px; 				display: inline-block; 				margin: 20px; 				-webkit-perspective: 1200px; 				-webkit-perspective-origin: 50% 50%; 			}  			.circle .shadow { 				position: absolute; 				width: 100%; 				height: 100%; 				background: -webkit-radial-gradient(50% 50%, circle, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%); 				-webkit-transform: rotateX(90deg) translateZ(-150px); 				z-index: -1; 			}

（學習視頻分享：css視頻教程）