Html 引导进度条自定义边框半径

我有以下片段：

.进度条{ 边框右上角半径：40px！重要； 边框右下角半径：40px！重要； -网络工具包盒阴影：无！重要； -莫兹盒影：无！重要； 盒影：无！重要； } .进展{ 边界半径：40px！重要； 背景色：白色！重要； -网络工具包盒阴影：无！重要； -莫兹盒影：无！重要； 盒影：无！重要； 边框：2个实心337AB7； }

---

这是由于.progress类中的CSS边框导致的呈现问题。它正在调整其子元素的大小

在本例中，.progress bar元素的高度实际上减少了4px，这是由于2px边框2px top+2px bottom，因此半径的曲率并不完全相同

相反，您可以使用长方体阴影，因为它不会调整其子元素的大小

.进度条{ 边框右上角半径：40px！重要； 边框右下角半径：40px！重要； -网络工具包盒阴影：无！重要； -莫兹盒影：无！重要； 盒影：无！重要； } .进展{ 边界半径：40px！重要； 背景色：白色！重要； /*下面的更改*/ -webkit盒阴影：插入0 2px 337AB7！重要； -moz盒阴影：插入0 2px 337AB7！重要； 盒影：插入0 2px 337AB7！重要； 边界：无； }