美文网首页
1px边框实现方案

1px边框实现方案

作者: visitor009 | 来源:发表于2018-10-20 11:48 被阅读0次

css

.border1px:after {
  content: ' ';
  box-sizing: border-box;
  display: block;
  position: absolute;
  top: 0; left: 0;
  width: 200%;
  height: 200%;
  transform: scale(.5);
  transform-origin: left top;
  pointer-events: none;
}
div { position: relative;width:100px;height:100px;}
div:after {border:1px solid #ccc;}

html

<div class="border1px"></div>

解释

  • 将目标伪元素的尺寸 等于 目标的200%;再进行缩小一半;
    1px 的边框 transform: scale(.5) -> 0.5px
  • 但是会有一个弊端: 伪元素因为position: absolute;处于最上层,点击的时候不会点到目标元素。
    解决: 将需要点击的元素position: relative; z-index: 2; 层叠高于:after

相关文章

  • 移动端一像素边框

    如何实现在移动端中显示一像素的边框 实现方案一:0.5像素 标准边框语法div{ border: 1px sol...

  • 1px边框实现方案

    css html 解释 将目标伪元素的尺寸 等于 目标的200%;再进行缩小一半;1px 的边框 transfor...

  • 移动端实现1px

    在移动端网页开发中,ui设计稿的边框设为1px,用css实现出来,我们会发现有些机型显示的边框实际比1px粗一些,...

  • 0.5 px的边框

    实现的原理 :使用伪元素设置1px的边框,然后对边框进行缩放(scaleY)。 设定目标元素的参考位置。 给目标元...

  • 1像素边框实现

    实现原理 1.先用伪类实现1px的边框 2.通过对屏幕密度的判断,进行缩放

  • 常用css总结

    垂直居中 伪类 + transform 实现移动端 Retina 屏幕 1px 边框 flex常用布局盒结构 关于...

  • 设置边框<->三种方式

    一、边框border的组成: 边框的宽度(粗细) :1px 边框的样式(样子) : 边框的颜色 : 二、复合样式 ...

  • 移动端实现1px边框

    实现方式:伪元素 + 缩放1,用伪元素在给需要设置边框的元素对应的地方画出PC端的1px边框;sass语法:文件m...

  • 边框border

    边框的组成:边框的粗细,边框的样式,边框的颜色 border: 1px solid red 边框的粗细:单位为px...

  • 边框属性border

    一.border属性格式 border:1px solid red; border:边框的宽度 边框的样式 边框的...

网友评论

      本文标题:1px边框实现方案

      本文链接:https://www.haomeiwen.com/subject/zyopzftx.html