Chrome瀏覽器（Webkit）：帶邊框半徑的邊框樣式

我在Chrome瀏覽器（和Safari瀏覽器）上遇到了一個問題，當我試圖創建一個帶有虛線邊框和邊框半徑的框時，寬度看起來更小。Chrome瀏覽器（Webkit）：帶邊框半徑的邊框樣式

當border-radius設置爲2px或更多時，會出現此錯誤。

我的代碼：

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>

知道爲什麼，我該如何解決這一問題？

謝謝:)

來源

2017-07-26 Kevin Nougat

[如何報告在瀏覽器的錯誤（https://support.google.com /鉻/答案/ 95315？HL = EN） – Blazemonger

你可以使用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>

來源

2017-07-26 16:33:29

Chrome瀏覽器（Webkit）：帶邊框半徑的邊框樣式

回答

相關問題