CSS3實現的漸變按鈕，在IE7、IE6下的濾鏡使用。

weixin_34119545發表於2014-07-24
CSSS3


 

.ui-button {
    BORDER-LEFT-WIDTH: 0px;
 OVERFLOW: visible; 
    CURSOR: pointer;
    FONT-SIZE: 16px;
    HEIGHT: 40px; 
    BORDER-RIGHT-WIDTH: 0px; 
    VERTICAL-ALIGN: middle; 
    BORDER-BOTTOM-WIDTH: 0px; 
    ZOOM: 1;
 FONT-WEIGHT: 700; 
    COLOR: #fff; 
    PADDING-BOTTOM: 0px;
 TEXT-ALIGN: center; 
    PADDING-TOP: 0px; 
    PADDING-LEFT: 20px; 
    FILTER: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffb800', endColorstr='#e66e1e'); 
    TEXT-DECORATION: none; 
    DISPLAY: block; 
    LINE-HEIGHT: 40px; 
    PADDING-RIGHT: 20px; 
    BORDER-TOP-WIDTH: 0px; 
    WIDTH: 219px; 
    BACKGROUND-COLOR: rgb(230,110,30)
}
.ui-button:hover {
    FILTER: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffb400', endColorstr='#f48f0d'); 
    TEXT-DECORATION: none; 
    BACKGROUND-COLOR: #f48f0d
}
A.ui-button:hover {
    FILTER: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffb400', endColorstr='#f48f0d'); 
    TEXT-DECORATION: none;
    BACKGROUND-COLOR: #f48f0d
}

 

另外，CSS中的字型行間距，可以通過 Font-size:12px/1.6;來表示12號字的1.6倍行間距。

相關文章