Question

使用以下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值还是因为边框宽度？
解决方案是什么？
当我用1px替换0.5px时它在Chrome中工作正常。

Answer 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);

Answer 2

您必须使用全像素检查此示例

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

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

<div>Menu</div>

Answer 3

谷歌浏览器将0.5px边框截断为0px。

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

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

Chrome中的边框不可见

3 个答案: