Граница в Chrome не отображается

Question

Реализован div в проекте со следующим CSS.

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 Browser границы не видны.

• Почему это происходит? Это из-за значений rgba или из-за ширины границы?
• Какое решение?
• Когда я заменяю 0.5px на 1px, он отлично работает и в Chrome.

Answer 1

В Chrome все значения пикселов CSS усекаются, поэтому десятичные числа не будут работать. Это означает, что в Chrome 0.5px будет усечен до 0px.

желаемый эффект, однако, может быть достигнуто с помощью CSS-х box-shadow

Fiddle: 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

Google Chrome усечен 0.5px граница до 0px.

Но теперь оно уже исправлено.
В настоящее время визуализируется граница 0.5px на 1px. (То же самое, как Internet Explorer и Firefox)

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