首先是一段废话，好久没写博客了，自己要凉了，先发一篇，最近在一帖子上看见css3画图，感觉好有趣，然后研究了一下，明后天再发一篇，hahah~~

checkbox初始样式

checkbox：初始样式如下图所示：

初始化的勾选框过于僵硬，因此有时候需要重新绘制复选框的样式

改变checkbox步骤

1. 先编写html代码 代码如下：

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

1. 编写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;
}

1. 利用复选框选中
   （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：结束~ 如有不正确的，欢迎指正啦~
然后，我居然只保存，不发出去，给蠢死啦