zoukankan      html  css  js  c++  java
  • 用css样式定义圆角背景图片按钮根据文字自适应宽度的方法

    CSS样式:

    .setBottom a,.setBottom span,.popTishi .popIcon{background:url(../images/button.png) no-repeat;}

    .setBottom{height:30px;position: relative;line-height:30px;}
    .setBottom span{ position:absolute;height:30px;3px; display:inline-block;top:0; cursor:pointer;}
    .setBottom span.spanLeft{left:-3px;}
    .setBottom span.spanRight{right:-3px;}
    .setBottom a{padding:0 20px; display:inline-block;}

    .btnBlue a{ background-position:center -180px}
    .btnBlue span.spanLeft{background-position:left -180px;}
    .btnBlue span.spanRight{ background-position:right -180px;}
    .btnBlue a:hover{background-position:center -150px;}
    .btnBlue a:hover .spanLeft{background-position:left -150px;}
    .btnBlue a:hover .spanRight{background-position:right -150px;}
    .btnBlue a,.btnBlue a:visited{color:#fff;}
    .btnBlue a:hover{color:#005383;}

    html用法:

     <div class="setBottom btnBlue fl">
                             <a href="#">
                             <span class="spanLeft"></span>
                             <span class="spanRight"></span>
                              搜索
                             </a>
      </div>

    样式中图片如下图所示:

  • 相关阅读:
    Ubuntu+Mac使用飞鸽传书iptux进行互通
    Mac下查看端口占用
    Ubuntu查看端口占用情况
    Ubuntu桌面卡死时的处理
    Bluefish
    响应式Spring Cloud初探
    go
    INSERT ... ON DUPLICATE KEY UPDATE产生death lock死锁原理
    现在的Unix时间戳(Unix timestamp)
    Android 一款Loading动画的实现思路
  • 原文地址:https://www.cnblogs.com/dearxinli/p/2773254.html
Copyright © 2011-2022 走看看