如何创建在所有浏览器上看起来都一样的虚线边框？ [复制]答案

【问题标题】：How to create a dashed border that looks the same on all browsers? [duplicate]如何创建在所有浏览器上看起来都一样的虚线边框？ [复制]
【发布时间】：2015-09-27 06:09:38
【问题描述】：

我可以制作单个 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;
}

【问题讨论】：

为什么不直接使用 CSS border 属性？ w3schools.com/css/css_border.asp
@bnahin：这将无法控制破折号的大小或它们之间的空间。
@Guessed：您将不得不使用多个渐变并更改渐变的方向（朝向底部）及其位置（而不是 left top 和 left bottom）。
@Guessed：看看我的 sn-p here。不发布答案，因为它看起来像一个骗子。
@Harry 非常酷。谢谢。

标签： html css border css-shapes

【解决方案1】：

为什么不直接使用border 属性？

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

https://jsfiddle.net/tph7515v/

【讨论】：

是的，这是正确的，但我没有明确说明我需要控制短划线间距和长度是我的错，所以我更新了我的问题和标题以反映这一点。

【解决方案2】：

使用边框属性。 CSS：

border: 5px dashed black;

【讨论】：

是的，这是正确的，但我没有明确说明我需要控制短划线间距和长度是我的错，所以我更新了我的问题和标题以反映这一点。

【解决方案3】：

一个简单的border CSS 已经可以实现你想要的输出

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

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

【讨论】：

是的，这是正确的，但我没有明确说明我需要控制短划线间距和长度是我的错，所以我更新了我的问题和标题以反映这一点。