1像素问题

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;
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 不会用代码框,所以看着有些乱套,,,,html部分 <!DOCTYPE html> 迅雷看看 ...
    这就是个帅气的名字阅读 5,585评论 0 0
  • 1. tab列表折叠效果 html: 能源系统事业部 岗位名称: 工作地点 岗位名...
    lilyping阅读 5,908评论 0 1
  • 各种纯css图标 CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出。直接用CSS3画出这些图形,要比...
    剑残阅读 13,297评论 0 8
  • 本书介绍 你是不是对Django的学习感到迷茫?是不是对网上零星的教程感到绝望?是不是苦于没有可以迅速上手的实例而...
    阡陌3536阅读 5,130评论 0 0
  • 如果没有传统观念的束缚,你会选择怎样的生活方式?画画?开书店?写书?理发师?美食家?在我看来,社会大学才是最好的大...
    貂蝉有点美阅读 3,870评论 2 1

友情链接更多精彩内容