如何制作小于1px边框线

2016-9-16

利用css3 transform

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>制作小于1px边框线</title>
  <style>
  .scale {
position: relative;
  }

  .scale:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
border-bottom: 1px solid #F50206;
transform: scaleY(.3);/*将边框线沿着垂直方向缩小到0.3倍*/
transform-origin: 0 bottom;/*因为是下边框线，所以沿着底部靠齐*/
  }

  #div1 {
width: 100%;
height: 50px;
background: #26A04B;
  }
  </style>
</head>

<body>
  <div id="div1" class="scale"></div>
</body>
</html>

标签：Web前端 css3

发表评论：