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>

    样式中图片如下图所示:

  • 相关阅读:
    运算放大器和比较器的区别
    求和电路
    差分放大电路
    含T型网络的反相放大器
    三运放仪用放大器
    cmd window关闭端口程序
    List及其实现类
    docker-compose安装elasticsearch集群+kibana
    sp_spaceused 查询表或者库的大小
    转载:Windows下利用bat批量打开程序
  • 原文地址:https://www.cnblogs.com/dearxinli/p/2773254.html
Copyright © 2011-2022 走看看