Question

我可以创建一个CSS虚线边框，如下所示，但是如何制作顶部和侧边框？

是的，border: dashed会这样做，但问题是破折号在Chrome，IE，FF等中呈现的方式不同，所以我正在寻找一种通用的跨浏览器样式声明来控制破折号厚度，以及间距和长度，并从下面开始有一个边框。

HTML：

<div class="box"></div>

CSS：

.box {
    height:95px;
    margin-top:6px;
    padding-top:10px;
}

.box:hover {
    color:#2200dd;
    height:101px;
    margin-top:0px;
    background: linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%, transparent 100%) repeat-x left top, left bottom;    
    background-size: 60px 6px;
}

Answer 1

为什么不使用border属性？

.box:hover {
    border: 5px dashed #2200dd;
}

https://jsfiddle.net/tph7515v/

Answer 2

使用border属性。 CSS：

border: 5px dashed black;

Answer 3

一个简单的border CSS已经实现了您想要的输出

.box {
    height:95px;
    margin-top:6px;
    padding-top:10px;
}

.box:hover {
    border : 10px dashed blue
}

Answer 4

.box:hover {
    color:#2200dd;
    height:101px;
    margin-top:0px;
  border-top: 2px dashed #ccc;       
}

示例：https://jsbin.com/deyipu

如何在所有浏览器上创建看起来相同的虚线边框？

4 个答案: