四角边线的效果

  ⋅   130  ⋅   css

html

<div class="border">
</div>

css

.border{
  border:1px solid #000;
  width:100px;
  height:100px;
  position: absolute;
}
.border:before{
  content: '';
  position: absolute;
  width: 80%;
  height: 100%;
  bottom: -1px;
  top:-1px;
  left:10%;
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
}
.border:after{
  content: '';
  position: absolute;
  width: 100%;
  height: 80%;
  left: -1px;
  right:-1px;
  top:10%;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
}

预览:

如需评论,请填写表单。

提交前先勾选