dot5

半像素边框

Usage no npm install needed!

<script type="module">
  import dot5 from 'https://cdn.skypack.dev/dot5';
</script>

README

dot5.css

半像素边框

常规设置

  • 上边框
<div class="dot5-top">上边框</div>
  • 右边框
<div class="dot5-right">右边框</div>
  • 下边框
<div class="dot5-bottom">下边框</div>
  • 左边框
<div class="dot5-left">左边框</div>
  • 上下边框
<div class="dot5-top dot5-bottom">上下边框</div>
  • 左右边框
<div class="dot5-left dot-right">左右边框</div>
  • 上下左右边框

上下左右边框必须嵌套，上下与左右样式可互相被包含，内部div不能设置margin，外部div不能设置padding；

<div class="dot5-top dot5-bottom">
    <div class="dot5-left dot-right">上下左右边框</div>
</div>

自定义设置

  • 修改线条颜色
.dot5-left::before,
.dot5-right::after,
.dot5-top::before,
.dot5-bottom::after{
  border-color:#c00;
}
  • 修改线条粗细
.dot5-left::before,
.dot5-right::after{
  -webkit-transform:scaleX(0.2);
  transform:scaleX(0.2)
}
.dot5-top::before,
.dot5-bottom::after{
  -webkit-transform:scaleY(0.2);
  transform:scaleY(0.2)
}

注意:

iphone4及4s在边框缩放小于0.5时，solid线条并不变细，而是颜色变浅，而dotted及dashed类型不显示。所以推荐缩放不小于0.5

  • 修改线条类型
.dot5-top::before{
  border-top-style:dashed
}
.dot5-right::after{
  border-right-style:dotted
}
.dot5-bottom::after{
  border-bottom-style:double
}
.dot5-left::before{
  border-left-style:dashed
}

DEMO

http://fe1024.com/static/demos/dot5