1像素问题

2018-07-04  本文已影响0人  李欢li

1 底部或顶部1像素

<div class="onebtn" id="1"  ></div>

.onebtn{
  width: 100%;
  height: 44px;
  overflow: hidden;
  font-size: 17px;
  color: #E6454A;
  padding-top: 14px;
  position: relative;
}
.onebtn:before{
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  transform-origin: 0 1px;
  transform: scaleY(.5);
  width: 100%;
  border-bottom: 1px solid #e8ebf0;
}

左/右1像素

<div id="1" class="btnleft" ></div>
.btnleft{
  width: 134px;
  font-size: 17px;
  color: #E7454A;
  padding-top: 14px;
  padding-bottom: 14px;
  position: relative;
}
.btnleft:before{
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 200%;
  background-color: #e8ebf0;
   transform:scale(0.5);
   transform-origin:top right;
}
上一篇 下一篇

猜你喜欢

热点阅读