首先是一段廢話，好久沒寫部落格了，自己要涼了，先發一篇，最近在一帖子上看見css3畫圖，感覺好有趣，然後研究了一下，明後天再發一篇，hahah~~

checkbox初始樣式

checkbox：初始樣式如下圖所示：

初始化的勾選框過於僵硬，因此有時候需要重新繪製複選框的樣式

改變checkbox步驟

1. 先編寫html程式碼 程式碼如下：

     <div class="box">
     		<input type="checkbox" name=""> 
            <span></span>
     </div>
 

2. 編寫css程式碼
   程式碼如下：注意此時span中的css樣式的定位是為了與複選框進行重合

.box { 
	position:relative;
      width: 40px;
      height: 40px;
      margin:100px auto; 
} 
input {
      width:100%; 
      height:100%;
      outline:0;
      border:0;
} 
span {
      position:absolute;
       width: 100%;
       height: 100%;
       top:3px;
       left:3px;
 }
 

3. 利用複選框選中
   （1）主要是利用兄弟元素的偽元素來進行畫圖，也就是span標籤。在進行對勾顯示的時候，需要把input標籤置於頂層，否則不能選中，在input標籤被選中的時候，顯示span所畫的圖形。
   （2）對勾主要是利用border來進行繪製，主要側重使用的屬性是border-color：transparent；屬性。設定這個屬性的時候，邊框的顏色是與父類的顏色一致，可以簡單的理解為透明色。
   （3）利用span的before以及after來繪製一個三角形，最後利用定位，讓二者之間的距離相差一些。也就是讓after覆蓋住before，使得before留下對勾的樣子。搭配使用rotate旋轉一下就好啦~

具體程式碼如下：（ps：這是完整版的程式碼，區分於開始，另外命名~）

.check {
    width: 14px;
    height: 14px;
    border:1px solid #ccc;
    margin:0 auto;
    margin-left:6px;
 } 
.check input {
     width: 14px;
     height: 14px;
     position:absolute;
     top:0;
     left:0;
     z-index:1;
     opacity:0; }
.check input:checked+span::after {
     display: block;
     content:'';
     border-top:5px solid transparent;
     border-left:5px solid transparent;
     border-bottom:8px solid white;
     border-right:5px solid white;
     transform:rotate(20deg);
     position:absolute;
     top:-3px;
     left:1px; }
.check input:checked+span::before {
     display: block;
     content:'';
     border-top:5px solid transparent;
     border-left:5px solid transparent;
     border-bottom:8px solid #949494;
     border-right:5px solid #949494;
     transform:rotate(20deg);
     position:absolute;
     top:-1px;
     left:2px; }
.check span {
     display: block;
     width: 100%;
     height: 100%;
     position:absolute;
     top:0;
     left:0;
}

實現結果圖

ps：結束~ 如有不正確的，歡迎指正啦~
然後，我居然只儲存，不發出去，給蠢死啦