快來收服CSS3神奇寶貝球吧！
快來收服CSS3神奇寶貝球吧！！！CSS3要畫圖是越來越簡單了，但如何省下HTML的原始碼數量就變得非常重要，那麼畫一顆神奇寶貝球到底需要多少的HTML碼呢？答案是…只需要一個DIV標籤即可！
CSS3中有許多迷人的功能，讓我們可以非常自由且彈性的設計我們的頁面區塊，其中Multiple background image就是一個非常吸引人的功能，不僅便利、彈性、省Code外，還能發揮更多的設計變化，上一次的「使用CSS3輕鬆寫出MAC彩虹球效果」以及「純CSS寫的撞擊點圖示！」其實也都是CSS3的Multiple background image功能，而這一次Amos更是好好玩了一下CSS3 Multiple background image功能，將CSS3的Gradient功能加進來一起使用，製作了九龍珠九顆神奇寶貝球，不多說，先來看看效果吧。在下方是實際呈現的效果
See the Pen CSS3 Pokemon ball by Amos (@bad_printer) on CodePen
CSS3撰寫前的準備
要寫CSS3神奇寶貝球之前，首先當然是要先準備最基本的HTML，在這個例子中，Amos想到其實可以利用::before以及::after這兩個擬類別物件來做一些事，所以就省下一些HTML 原始碼，從單一一組DIV標籤開始吧，至於CSS class則給他命名為box（如下）
<div class="box"></div>
在「.box」中是將球體外型、按鈕這些基本物件先建立好，之後的div則是套用另外一個CSS class來做覆蓋，好省下重新設定外型的工作，所以九顆球的話，原始碼就會是下方這樣
<div class="box"></div> <div class="box box1"></div> <div class="box box2"></div> <div class="box box3"></div> <div class="box box4"></div> <div class="box box5"></div> <div class="box box6"></div> <div class="box box7"></div> <div class="box box8"></div>
而基本的CSS設定，則如下方原始碼，設定了圓角、球體尺寸、中間腰部範圍以及外框，最後也先設定了gradient背景，讓box成為底一顆CSS3神奇寶貝球。
.box{
width: 200px;
height: 200px;
display:inline-block;
margin:20px;
position: relative;
border: 6px solid #ccc;
border-radius: 50%;
background-image: -moz-radial-gradient(40% 40%,circle,rgba(0,0,0,.1) 40%, rgba(0,0,0,1) 100%), -moz-linear-gradient(-90deg, #f33 45%, #333 45%, #3f3f3f 50%, #333 55%, #FFF 55%);
background-image: -webkit-radial-gradient(40% 40%,circle,rgba(0,0,0,.1) 40%, rgba(0,0,0,1) 100%), -webkit-linear-gradient(-90deg, #f33 45%, #333 45%, #3f3f3f 50%, #333 55%, #FFF 55%);
}
.box1{
background-image: -moz-radial-gradient(40% 40%,circle,rgba(0,0,0,.1) 40%, rgba(0,0,0,1) 100%), -moz-linear-gradient(-90deg,rgba(0,0,0,0) 45%, #333 45%, #3f3f3f 50%, #333 55%, #FFF 55%),-moz-linear-gradient(0deg,#F79905 45%, #333 45%, #3f3f3f 50%, #333 55%, #F79905 55%);
background-image: -webkit-radial-gradient(40% 40%,circle,rgba(0,0,0,.1) 40%, rgba(0,0,0,1) 100%), -webkit-linear-gradient(-90deg,rgba(0,0,0,0) 45%, #333 45%, #3f3f3f 50%, #333 55%, #FFF 55%),-webkit-linear-gradient(0deg,#F79905 45%, #333 45%, #3f3f3f 50%, #333 55%, #F79905 55%);
}
.box:before{
content: "";
display: block;
position: absolute;
z-index: 6;
width: 20%;
height: 20%;
background-color: #FFF;
border-radius: 50%;
box-shadow: 0 0 0 1px #AAA, 0 0 0 10px #fff, 0 0 0 16px #3f3f3f;
margin: 40%;
}
.box:after{
content: "";
display: block;
position: absolute;
z-index: 1;
width: 94%;
height: 10%;
background-color:rgba(0,0,0,0);
margin: 45% 3%;
box-shadow: 12px 0 0 #FFF, -12px 0 0 #FFF;
}
第二顆CSS3神奇寶貝球則將第一個球的gradient色彩做了變化，同樣都是採用linear-gradient的作法，Amos只是換了個遮蓋的方式及方向，就達到了我們所要的效果了。而從第三顆開始基本上都是沿用第二顆的觀念來延伸運用，到了第五顆CSS3神奇寶貝球就增加了radial-gradient的內容，讓畫面的感覺更加的多了一點變化。
在Amos這次玩的範例中，其實概念都差不多，唯一需要注意分析的則是多重背景的層疊方式以及遮蓋的問題，只要思考好了～各位要畫出這樣的圖也是非常容易的喔～若是想看完整的原始碼，請直接到CodePen看看畫面吧。若有任何不同的想法也歡迎各位不吝指教喔^^
