摘要：假如把的都刪除，就是這樣當(dāng)這個是，子級是時，子級的是根據(jù)這個的原始點(diǎn)為原始點(diǎn)。的子節(jié)點(diǎn)我觀察到就是按鈕中間的黑色點(diǎn)點(diǎn)。總之它就是定義了一個黑色的圓形。的只有一點(diǎn)要注意不透明度為，也就是不顯示。的加號，是相鄰兄弟選擇器。

本源代碼來自http://cssdeck.com/labs/css-checkbox-styles
我只是將其進(jìn)行分析。

點(diǎn)擊前 點(diǎn)擊后

在這里我只一段段分析。源地址有源代碼，我就不粘了。

根節(jié)點(diǎn) roundedOne

在這里我只一段段分析。源地址有源代碼，我就不粘了。

.roundedOne {
               width: 28px;
               height: 28px;
               background: #fcfff4;

               background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
               background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
               background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
               background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
               background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
               filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#fcfff4", endColorstr="#b3bead",GradientType=0 );
               margin: 20px auto;

               -webkit-border-radius: 50px;
               -moz-border-radius: 50px;
               border-radius: 50px;

               -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
               -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
               box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
               position: relative;// 當(dāng)這個是relative，子級是absolute時，子級的TLBR是根據(jù)這個的原始點(diǎn)為原始點(diǎn)。
           }

.roundedOne只是給了它一個那個白色的圈。
假如把.roundedOne的width,height,background都刪除，就是這樣：

position: relative;// 當(dāng)這個是relative，子級是absolute時，子級的TLBR是根據(jù)這個的原始點(diǎn)為原始點(diǎn)。

roundedOne的子節(jié)點(diǎn)label

.roundedOne label {
               cursor: pointer;
               position: absolute;
               width: 20px;
               height: 20px;

               -webkit-border-radius: 50px;
               -moz-border-radius: 50px;
               border-radius: 50px;
               left: 4px;
               top: 4px;

               -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
               -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
               box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);

               background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
               background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
               background: -o-linear-gradient(top, #222 0%, #45484d 100%);
               background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
               background: linear-gradient(top, #222 0%, #45484d 100%);
               filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#222", endColorstr="#45484d",GradientType=0 );
           }

我觀察到,label就是按鈕中間的黑色點(diǎn)點(diǎn)。
cursor: pointer;這個屬性是定義了鼠標(biāo)移動上去的光標(biāo)；
position: absolute;上一步已經(jīng)說過了；
width: 20px;height: 20px;定義這個塊的大小；
border-radius: 50px; 圓角；
left: 4px;top: 4px;不多說；
background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);顏色為線性漸變。
總之它就是定義了一個黑色的圓形。
roundedOne的label:after

.roundedOne label:after {
               -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
               filter: alpha(opacity=0);
               opacity: 0;
               content: "";
               position: absolute;
               width: 16px;
               height: 16px;
               background: #00bf00;

               background: -webkit-linear-gradient(top, #00bf00 0%, #009400 100%);
               background: -moz-linear-gradient(top, #00bf00 0%, #009400 100%);
               background: -o-linear-gradient(top, #00bf00 0%, #009400 100%);
               background: -ms-linear-gradient(top, #00bf00 0%, #009400 100%);
               background: linear-gradient(top, #00bf00 0%, #009400 100%);

               -webkit-border-radius: 50px;
               -moz-border-radius: 50px;
               border-radius: 50px;
               top: 2px;
               left: 2px;

               -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
               -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
               box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
           }

只有一點(diǎn)要注意opacity: 0;不透明度為0，也就是不顯示。而在后面應(yīng)該會看到有一個地方把這個設(shè)置為1，我覺得應(yīng)該就是當(dāng)被checked時，opacity就會被設(shè)置為1.

.roundedOne input[type=checkbox]:checked + label:after {
            opacity: 1;
}

roundedOne的label:hover::after

.roundedOne label:hover::after {
               -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
               filter: alpha(opacity=30);
               opacity: 0.3;
           }

不多說。
roundedOne的input

.roundedOne input[type=checkbox]:checked + label:after {
               -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
               filter: alpha(opacity=100);
               opacity: 1;
           }

加號，是CSS 相鄰兄弟選擇器。