自定义透明框，仅在对象周围有边框

Question

http://i.imgur.com/2Vptqde.png

我目前的解决方案有一些宽度问题，如果框内的图标宽度小于其他 - 它会出现缩小框。

table { border-top: 1px double #7F7F7F; }

table td + td { border-left: 1px solid #7F7F7F; }

Answer 1

好吧，我认为你可以使用弹性盒模型。

https://jsfiddle.net/pablodarde/cyg5sawy/

<强> HTML

<table>
  <tr>
    <td>
      <div>Object</div>
    </td>
    <td>
      <div class='forty'>Object</div>
    </td>
    <td>
      <div class='thirty'>Object</div>
    </td>
    <td>
      <div class='twenty'>Object</div>
    </td>
  </tr>
</table>

<强> CSS

table { 
  border-collapse: collapse;
  border-top: 1px double #7F7F7F; 
  width: 160px;
}

table tr {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  width: 100%;
}

table td {
  display: inline-flex;
  width: 80px;
}

table td + td { border-left: 1px solid #7F7F7F; }

div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  overflow: hidden;
  background: rgba(255,0,0,.4);
}

.forty {
   width: 40px;
   height: 40px;
 }

.thirty {
   width: 30px;
   height: 30px;
}

.twenty {
  width: 20px;
  height: 20px;
}