gpt4 book ai didi

css - 漏洞 Chrome (Webkit) : Border-style dashed with border-radius

转载 作者:行者123 更新时间:2023-12-02 04:34:06 26 4
gpt4 key购买 nike

我在 chrome(和 safari)上遇到问题,当我尝试创建一个带有虚线边框和边框半径的框时,边框宽度看起来更小。

当 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>

知道为什么以及如何解决这个问题吗?

谢谢:)

最佳答案

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

关于css - 漏洞 Chrome (Webkit) : Border-style dashed with border-radius,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45332518/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com