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

halo

10248

发布于
2019-07-23

图片描述

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

javascript html

html5 vue.js

阅读 8.9k

3 个回答

得票最新

hfhan

28.9k72241

发布于
2019-07-23

✓ 已被采纳

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

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

rain

4616111231

发布于
2019-07-23

更新于
2019-07-23

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

<!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>

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

查看全部 3 个回答

被 1 篇内容引用

权威发布 | SegmentFault 思否 2019年度 Top Writer 榜单
6

推荐问题

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

遇到一道设计模式的面试题，各位大佬看下如何解决,题目要求是优化这段业务代码？

不同页面之间可以通过localstorage保存响应式吗？

扁平化数组转换成树形?

省市区街道数据在哪里可以下载？

Vue项目一个报错无法找到原因?

如何在JavaScript中从外部中断for循环的执行？

网站的不同域名互相跳转如何保持登录态？