Chrome 中的边框不可见答案

【问题标题】：Border in Chrome not visibleChrome 中的边框不可见
【发布时间】：2017-01-30 00:36:17
【问题描述】：

在项目中使用以下 CSS 实现了 div。

div{

    border: 0.5px solid rgba(35, 199, 255, 0.5);
    border-radius: 2px;
    height: 100px;
    width: 100px;
}

<div>     
  Menu
</div>

在 Firefox 和 Internet Explorer 中，<div> 的边框正常显示，但在 Chrome 浏览器中边框不可见。

为什么会这样？是因为 rgba 值还是因为边框宽度？
解决办法是什么？
当我将 0.5px 替换为 1px 时，它在 Chrome 中也可以正常工作。

【问题讨论】：

不，这是因为0.5px 的边框宽度。使用全像素。
@CBroe：谢谢，但 Chrome 是否不支持以点为单位的像素。
尝试使用盒子阴影来模拟边框：jsfiddle.net/e843tjtz
@dfsq ：是的，这对我有用。非常感谢，唯一的问题是超过 0.5 px 说 3.5 px 阴影看起来不像边框，如果是 0.5 px 这可行
@VaibhavJain 它应该适用于任何尺寸：见jsfiddle.net/x5ook88d/1（我也更新了我的原始答案）。

标签： html css

【解决方案1】：

在 Chrome 中，所有 CSS 像素值都会被截断，因此无法使用小数。这意味着在 Chrome 中，0.5px 将被截断为 0px。

但是可以使用 CSS 的 box-shadow 来实现所需的效果

小提琴： http://jsfiddle.net/x5ook88d/1/

-webkit-box-shadow: 0px 0px 0px 3.5px rgba(35, 199, 255, 0.5);
-moz-box-shadow: 0px 0px 0px 3.5px rgba(35, 199, 255, 0.5);
box-shadow: 0px 0px 0px 3.5px rgba(35, 199, 255, 0.5);

【讨论】：

确实 Chrome 不支持它。解决方案呢？
@dfsq：是的，如果 Chrome 不支持它。在 Chrome 中实现 0.5px 半径的解决方案是什么。
@VaibhavJain 我会尝试使用盒子阴影。

【解决方案2】：

你必须使用全像素检查这个例子

div{
    border: 1px solid rgba(35, 199, 255, 0.5);
    border-radius: 2px;
    height: 100px;
    width: 100px;
}

我使用 1px 而不是 0.5px 的唯一区别

<div>Menu</div>

【讨论】：

但问题是 OP 需要 0.5 的宽度，这在这种情况下很重要。

【解决方案3】：

Google Chrome 将 0.5 像素的边框截断为 0 像素。

但现在已经修复了。
目前，将 0.5px 边框渲染为 1px。（与 Internet Explorer 和 Firefox 相同）

229428 - Borders/outlines rounded down, other browsers round up - chromium - Monorail

【讨论】：