vue有没有办法实现一种虚线实线都有的边框

halo
  • 10

图片描述

这种边框用vue或者html5之类的怎么实现呢?

评论
阅读 2.8k
3 个回答
✓ 已被采纳

这是css方面的问题,结果你标了四个标签,两个js,两个html,唯独没有css

这种布局就是父元素的样式问题:首先父元素是虚线边框,再看左下角和右上角的两个,这两个可以考虑使用伪元素来完成,before定位在左下角,实线的左边框和下边框,after定位在右上角,实线的右边框和上边框。这样这个效果就出来了,那种一句话就能搞定的暂时还没有

楼上正解~~根据楼上思路写的demo

clipboard.png

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
 <style>
  div{
  width:200px;
  height:80px;
  border:1px dashed skyblue;
  position:relative;
}
div::before{
  content:'';
  display:inline-block;
  width:20px;
  height:15px;
  border-top:1px solid blue;
  border-right:1px solid blue;
  position:absolute;
  right:0;
  top:0;
}

div::after{
  content:'';
  display:inline-block;
  width:20px;
  height:15px;
  border-bottom:1px solid blue;
  border-left:1px solid blue;
  position:absolute;
  left:0;
  bottom:0;
}
  </style>
</head>
<body>
    <div>
      
  </div>
</body>
</html>

clipboard.png

right:-1px;
top:-1px;
----------
left:-1px;
bottom:-1px;

我用的是div嵌套,到时候你把子div的背景颜色设置为透明,或者和你项目的父div颜色相同就行,总之子div的颜色要融入父div
https://codepen.io/starwang66...

宣传栏