教學–純CSS寫的撞擊點圖示！還會轉轉轉喔

撞擊標示圖是Amos利用通勤時一點點的時間擠出來的小範例，這個例子採用了兩種方式來撰寫，而兩種作法也都各有其優缺點，一個是採用了CSS3的圓形漸層，一個則是採用了CSS3的線性漸層與::before、::after這兩個擬類別來達成。

最近Amos實在忙到有點抽不出時間來寫點好玩的CSS例子，唯一能利用的時間只有在火車上通勤時的一點時光，之前Amos用CSS3寫了一個彩虹沙灘球，想想這樣的寫法應該可以有更多的範例可以發展才是，所以Amos利用了CSS3彩虹沙灘球的撰寫方式為基礎，小小修改了一些原始碼來達到撞擊標示圖的效果，現在就跟著Amos來看看吧。

方式一：使用CSS3圓形漸層

使用CSS3圓形漸層之前，當然先要建立基本的圓形，所以我們先使用CSS3的圓角border-radius屬性來製作一個圓形區塊。

接著使用CSS3的backgeound-size設定背景尺寸為四分之一區塊大小，並且利用背景定位來預先設定後續要產出的四個背景圖的位置，分別是左上、右上、右下、左下。

然後就是利用CSS3的多重背景功能來製作四張圓形漸層圖片啦，而四張圓形漸層圖片的角度恰好都要從區塊圓心開始，往外放射狀的展現漸層色彩，而為了讓圓形的感覺不致於太過發散，Amos加上了一點邊框讓整體感覺更好一點，不會有沒有邊邊的感覺，馬上來看看原始碼囉～

.strike{
	width:100px;
	height:100px;
	margin:auto;
	border:6px solid #333;
	border-radius:50%;
	background-size:50px 50px;
	background-repeat:no-repeat;
	background-position:left top,right top,right bottom,left bottom;
	background-image:
	-moz-radial-gradient(50px 50px, circle farthest-side, rgba(255,205,0,1) 70%,rgba(255,255,160,1) 95%),
	-moz-radial-gradient(0px 50px, circle farthest-side,rgba(0,0,0,1) 70%,rgba(80,80,80,1) 95%),
	-moz-radial-gradient(0px 0px, circle farthest-side,rgba(255,205,0,1) 70%,rgba(255,255,160,1) 95%),
	-moz-radial-gradient(50px 0px, circle farthest-side,rgba(0,0,0,1) 70%, rgba(80,80,80,1) 95%);
	background-image:
	-webkit-radial-gradient(50px 50px, circle farthest-side, rgba(255,205,0,1) 70%,rgba(255,255,160,1) 95%),
	-webkit-radial-gradient(0px 50px, circle farthest-side,rgba(0,0,0,1) 70%,rgba(80,80,80,1) 95%),
	-webkit-radial-gradient(0px 0px, circle farthest-side,rgba(255,205,0,1) 70%,rgba(255,255,160,1) 95%),
	-webkit-radial-gradient(50px 0px, circle farthest-side,rgba(0,0,0,1) 70%, rgba(80,80,80,1) 95%);
	box-shadow:0 0 5px #FFFFFF;}

方式二：使用線性漸層搭配::before、::after擬類別

若是您不懂::before與::after的話，建議您可以先看看「使用::before 與 ::after來製作可列印的logo圖片」這篇文章先有個概念。此第二種方式相同採用了CSS3多重背景的功能，首先先給予背景一個色彩設定，接下來設定背景圖片尺寸為四分之一區塊大小，再將背景做定位後給予漸層色彩即可。

繼續我們使用::before擬類別來製作光暈效果，先利用::before建立一個空的區塊屬性物件，將定位設定在父層物件左上角，接著使用box-shadow搭配rgba的色彩設定即可完成啦～一樣讓我們來看看原始碼囉～

.strike2{ 
     width:100px;
     height:100px;
     margin:auto;
     border:6px solid #333;
     border-radius:50%;
     background-color:rgba(255,205,0,1);
     background-size:50px 50px;
     background-repeat:no-repeat;
     background-position:left top,right bottom;
     background-image:-moz-linear-gradient(0deg,rgba(0,0,0,1) 0%, rgba(0,0,0,1) 100%),-moz-linear-gradient(0deg,rgba(0,0,0,1) 0%, rgba(0,0,0,1) 100%);
     background-image:-webkit-linear-gradient(0deg,rgba(0,0,0,1) 0%, rgba(0,0,0,1) 100%),-webkit-linear-gradient(0deg,rgba(0,0,0,1) 0%, rgba(0,0,0,1) 100%);
     box-shadow:0 0 5px #FFF;
     position:relative;}
.strike2::before{ content:"";
     width:100%;
     height:100%;
     border-radius:50%;
     position:absolute;
     left:0;
     top:0;
     box-shadow:inset 0 0 10px rgba(255,255,255,.5), inset 0 0 20px rgba(255,255,255,.5), inset 0 0 25px rgba(255,255,255,.5);}

來看看完成的畫面吧^^，若有更好的設計方式也請各位不吝分享喔～（話說有沒有人發現哪裡怪怪的？）