Bug Chrome (Webkit): Bordure style avec bordure-rayon

J'ai un problème sur chrome (et safari) quand j'essaye de créer une boîte avec une bordure en pointillés et un rayon de frontière, la frontière- la largeur semble plus petite.Bug Chrome (Webkit): Bordure style avec bordure-rayon

Ce bug apparaît lorsque le rayon de bordure est défini sur 2px ou plus.

Mon code:

div { 
 
    margin: 10px; 
 
    padding: 10px; 
 
} 
 

 
.border { 
 
    border: 1px dashed black; 
 
} 
 

 
.radius-1 { 
 
    border-radius: 1px; 
 
} 
 

 
.radius-2 { 
 
    border-radius: 2px; 
 
} 
 

 
.radius-10 { 
 
    border-radius: 10px; 
 
}

<body> 
 
    <div class="border"> 
 
    No radius 
 
    </div> 
 
    <div class="border radius-1"> 
 
    radius 1px 
 
    </div> 
 
    <div class="border radius-2"> 
 
    radius 2px 
 
    </div> 
 
    <div class="border radius-10"> 
 
    radius 10px 
 
    </div> 
 
</body>

Toute idée pourquoi et comment puis-je résoudre ce problème?

Merci :)

Source

2017-07-26 Kevin Nougat

[Comment signaler un bogue dans Chrome] (https://support.google.com/chrome/answer/95315? hl = fr) – Blazemonger

Vous pouvez utiliser em:

.border { 
    border: 0.1em dashed black; 
}

div { 
 
    margin: 10px; 
 
    padding: 10px; 
 
} 
 

 
.border { 
 
    border: 0.1em dashed black; 
 
} 
 

 
.radius-1 { 
 
    border-radius: 1px; 
 
} 
 

 
.radius-2 { 
 
    border-radius: 2px; 
 
} 
 

 
.radius-10 { 
 
    border-radius: 10px; 
 
}

<body> 
 
    <div class="border"> 
 
    No radius 
 
    </div> 
 
    <div class="border radius-1"> 
 
    radius 1px 
 
    </div> 
 
    <div class="border radius-2"> 
 
    radius 2px 
 
    </div> 
 
    <div class="border radius-10"> 
 
    radius 10px 
 
    </div> 
 
</body>

Source

2017-07-26 16:33:29

Bug Chrome (Webkit): Bordure style avec bordure-rayon

Répondre

Questions connexes