css圆角背景图片按钮-自适应内容大小

css圆角背景图片按钮-自适应内容大小

btn自适应内容大小，这已经不是什么新的写法了，很多人都会用的，而且效果上还是比较实用。

这里只是把https://addons.mozilla.org/里面的代码按钮提出来方便使用，图片的名称都没改，想弄清楚图片的就在页面信息里自己看吧

.install-button  {
    font : bold 14px "Trebuchet MS", Helvetica, "Helvetica Neue", Arial, sans-serif ;
}
.install-button:after  {
    content : "." ;
    clear : both ;
    display : block ;
    visibility : hidden ;
    height : 0 ;
    overflow : hidden ;
}
.install-button a *  {
    display : block ;
    float : left ;
    position : relative ;
}
.install-button a  {
    float : left ;
    cursor : pointer ;
    max-width : 290px ;
    color : #062445 ;
    text-decoration : none ;
    background : #7cc11c url("https://addons.mozilla.org/img/sprite.png?20090430") 100% -730px no-repeat ;
}
.install-button a span  {
    padding : 0 0 0 6px ;
    background : transparent url("https://addons.mozilla.org/img/installbtn-edges.png") left bottom no-repeat ;
}
.install-button a span span  {
    padding : 0 0 8px 0 ;
    background : transparent url("https://addons.mozilla.org/img/installbtn-edges.png") right bottom no-repeat ;
}
.install-button a span span span  {
    left : -6px ;
    padding : 0 0 6px 0 ;
    background : transparent url("https://addons.mozilla.org/img/installbtn-edges.png") left top no-repeat ;
}
.install-button a span span span strong  {
    right : -6px ;
    padding : 10px 45px 0 6px ;
    background : transparent url("https://addons.mozilla.org/img/installbtn-edges.png") right top no-repeat ;
}
.install-button a:hover, .install-button a:focus, .install-button a:active  {
    color : #0a3b73 ;
    background-color : #9dd34c ;
    background-position : 100% -860px ;
}

< p  class ="install-button" >< a  href ="#" >< span >< span >< span >< strong > 在街上看美女，目光高一点就是欣赏，目光低一点就是流氓。 </ strong ></ span ></ span ></ span ></ a ></ p >

转载于:https://www.cnblogs.com/window5549-accp/archive/2009/11/21/1607560.html