css点划线边框

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>点划线边框</title>
</head>
<body>
<div></div>
<style>
  div {
    width: 100px;
    height: 100px;
    --borderwidth: 1px;
    border-left: var(--borderwidth) solid #e6e6e6;
    border-right: var(--borderwidth) solid #e6e6e6;
    position: relative;
  }

  div:after {
    content: "";
    position: absolute;
    width: calc(100% + var(--borderwidth) * 2);
    height: 100px;
    bottom: -100px;
    left: calc(-1 * var(--borderwidth));
    background-image: repeating-linear-gradient(to right, #e6e6e6 0px, #e6e6e6 1px, transparent 1px, transparent 4px);
  }
</style>
</body>
</html>

 

css点划线边框

上一篇:微信JS-SDK坐标位置转换为百度地图坐标


下一篇:记 react 项目中去掉(注销)service-worker.js 控制浏览器缓存问题