checkbox樣式研究——按鈕

marek 發(fā)布于2019-08-01 15:03 / 1983人閱讀

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

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

Rounded ONE HTML

效果圖

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

CSS

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

根節(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)這個(gè)是relative，子級(jí)是absolute時(shí)，子級(jí)的TLBR是根據(jù)這個(gè)的原始點(diǎn)為原始點(diǎn)。
           }

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

position: relative;// 當(dāng)這個(gè)是relative，子級(jí)是absolute時(shí)，子級(jí)的TLBR是根據(jù)這個(gè)的原始點(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;這個(gè)屬性是定義了鼠標(biāo)移動(dòng)上去的光標(biāo)；
position: absolute;上一步已經(jīng)說(shuō)過(guò)了；
width: 20px;height: 20px;定義這個(gè)塊的大小；
border-radius: 50px; 圓角；
left: 4px;top: 4px;不多說(shuō)；
background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);顏色為線性漸變。
總之它就是定義了一個(gè)黑色的圓形。
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)該會(huì)看到有一個(gè)地方把這個(gè)設(shè)置為1，我覺(jué)得應(yīng)該就是當(dāng)被checked時(shí)，opacity就會(huì)被設(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;
           }

不多說(shuō)。
roundedOne的input

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

加號(hào)，是CSS 相鄰兄弟選擇器。