placeholder在鼠標(biāo)移入時(shí)消失
/* WebKit browsers */
input:focus::-webkit-input-placeholder { color:transparent; }
/* Mozilla Firefox 4 to 18 */
input:focus:-moz-placeholder { color:transparent; }
/* Mozilla Firefox 19+ */
input:focus::-moz-placeholder { color:transparent; }
/* Internet Explorer 10+ */
input:focus:-ms-input-placeholder { color:transparent; }
placeholder文字樣式
/*修改placeholder*/
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
? ? color: #999;
}
input:-moz-placeholder, textarea:-moz-placeholder {
? ?? color: #999;
}
input::-moz-placeholder, textarea::-moz-placeholder {
? ? color: #999;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
? ? color: #999;
}
? 超鏈接的幾種狀態(tài)(順序如下:l-v-h-a)
a:link{text-decoration:none;}? /* 指正常的未被訪問過的鏈接*/
a:visited{text-decoration:none;}/*指已經(jīng)訪問過的鏈接*/
a:hover{text-decoration:none;}/*指鼠標(biāo)在鏈接*/
a:active{text-decoration:none;}/* 指正在點(diǎn)的鏈接*/
外陰影
-moz-box-shadow:2px 2px 5px #333333;
? ? ? -webkit-box-shadow:2px 2px 5px #333333;
box-shadow:2px 2px 5px #333333;
更改復(fù)選框樣式
/*最初狀態(tài)*/
input[type=checkbox]{
? ? ? position:relative;
? ? ? width:20px;
? ? ? height: 20px;
? ? }
? /*用前置內(nèi)容生成的方式附圖*/
? ? input[type=checkbox]::before{
? ? ? content:'';
? ? ? position:absolute;
? ? ? width:20px;
? ? ? height:20px;
? ? ? background:url('images/ungou.jpg') no-repeat;
? ? }
/*點(diǎn)選后,更改前置內(nèi)容生成時(shí)的圖片即可*/
? ? input[type=checkbox]:checked::before{
? ? ? background:url('images/gou.jpg') no-repeat;
? ? ? content:'';
? ? }?
border-radius
.boder-radius{
? ? -webkit-border-radius:6px;//適配以webkit為核心的瀏覽器(chrome、safari等)? ? -moz-border-radius:6px;//適配firefox瀏覽器? ? -ms-border-radius:6px;//適配IE瀏覽器? ? -o-border-radius:6px;//適配opera瀏覽器? ? border-radius:6px;//適配所有瀏覽器(需要放在最后面,類似于if..else if..else..)}
透明度的兼容性問題(兼容ie8和ie9)
opacity: 0.5;filter: alpha(opacity = 50);
filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);