css实现tag

来源：互联网发布：法线贴图转换软件编辑：程序博客网时间：2024/06/05 08:58

新的需求要求实现一个可适应的tag，如下图所示：

这里写图片描述
一开始实现的时候，想法过于简单，把标签整个切成一个背景图，结果发现当文字的长度不固定的时候，将会把图形拉扯变形，十分难看，为了解决这个问题，在同事的点拨下，决定把背景图切成两部分，即：

这里写图片描述

————–切图容易拼凑难，且切且珍惜—————————

当我切图完毕打算拼在一起的时候，发现问题来了
无论是(第一张图片用img展示，第二张图作为span的背景图)，还是(两张图均以span的背景图展示)，都有可能会出现两条线对不齐的情况，也就是第一张图和第二张图不能完美的拼凑成一条线，会有像素级的错位，针对这个问题也进行了很多尝试，然而并没有解决问题。

————–方案一：background插入两个图片—————————

后来想到background里面可不可以放两个图片，然后尝试了一下，发现可以。background: url(“one.png”),url(“two.png”);
background-position: 0% 100%,0.625rem 100%; //(x1 y1,x2 y2)
background-size: 0.76rem 100%,83% 100%; //(w1 h1,w2 h2)

不足：当tag里面的内容过长，将会导致文字溢出背景图片，不能根据文字长短自适应

————–方案二：运用before ，after解决————————–

今天看到一篇文章是用css来写一个tag
我尝试努力实现一个产品心中完美的tag，不过还是没有实现，上个半成品

这里写图片描述

能看出来第一个基本实现了效果图，但是边缘有部分空白，没有完全连接
一开始实现的效果第第二个图，采用before实现前面的实心梯形，after实现后面的空心圆点，后来在里面又添加了一个span,变成
博学多才
里面的span添加before伪类，样式类似于外部的实心梯形，颜色为白色，遮住蓝色实心梯形的多余部分。

  <style type="text/css">        .tag-li{           margin-left: 1rem;           position: relative;           padding-left: 1rem;           height: 1.5rem;           /*border-top: 1px solid blue;           border-bottom: 1px solid blue;*/           border: 1px solid blue;           border-left:none;           display: inline-block;           border: 1px solid #1daffa;           border-left: none;           box-sizing:border-box;           border-top-right-radius: 0.2rem;           border-bottom-right-radius: 0.2rem;           padding-right: .5rem;           line-height: 1.5rem;           color:#1daffa;       }         .tag-li:before{           /*content: " ";           background-image: url("http://cdn2.picooc.com/web/res/fatburn/image/studentList/report-icon1a.png");           background-size: cover;           left: -.8rem;*/           content: " ";           position: absolute;           top: -1px;           left: -1.6rem;           width: .85rem;           height: 1.5rem;           height: .75rem;           display: inline-block;           border: 1px solid transparent;           border-right: .8rem solid #1daffa;           border-top: .4rem solid transparent;           border-bottom: .4rem solid transparent;       }       .tag-li-icon:before{           content: " ";           position: absolute;           top: -1px;           left: -1.5rem;           width: .85rem;           height: 1.5rem;           height: .75rem;           display: inline-block;           border: 1px solid transparent;           border-right: .7rem solid #fff;           border-top: .4rem solid transparent;           border-bottom: .4rem solid transparent;       }       .tag-li:after{           content: " ";           width: .2rem;           height: .2rem;           border-radius: 50%;           position: absolute;           top: .6rem;           left: 0rem;           border: 1px solid #1daffa;       }       </style>          <body>       <span class="tag-li"><span class="tag-li-icon"></span>博学多才</span>       <span class="tag-li">博学多才</span>  </body>

————–方案三：运用before ，background解决————————–

虽然上一个版本不是最完美的解决方案，但是，却给我提供了思路，既然可以用before+after
伪类实现，为什么不能用before+background（方案一和方案二的结合）代码如下：

.tag-li, .tag-li1{            margin-left: 1rem;            position: relative;            padding-left: 1rem;            height: 1.5rem;            border: 1px solid blue;            border-left:none;            display: inline-block;            border: 1px solid #1daffa;            border-left: none;            box-sizing:border-box;            border-top-right-radius: 0.2rem;            border-bottom-right-radius: 0.2rem;            padding-right: .5rem;            line-height: 1.5rem;            color:#1daffa;        }          .tag-li1:before{            content: " ";            width: .85rem;            height: 1.5rem;            background-image: url("one.png");            background-size: cover;            position: absolute;            top: -1px;            left: -.8rem;        }<body>    <span class="tag-li1">博学多才</span></body>

————–纸上得来终觉浅，绝知此事要躬行————————–

0 0