gpt4 book ai didi

css - 伪元素边框上的锯齿状边缘

转载 作者:太空宇宙 更新时间:2023-11-04 13:05:51 26 4
gpt4 key购买 nike

我正在尝试使用 CSS 创建视觉效果,您可以在此处查看:http://jsfiddle.net/FL8Ug/

此时的问题是,当我在 :after 伪元素上同时使用 border-topborder-bottom 时,边缘会变成“锯齿状”(在 Chrome 中)。

例如,当您移除 border-bottom 时,顶部三 Angular 形(即右边框的上半部分)变得更加平滑。

我尝试同时应用 -webkit-transform:translateZ(0)-webkit-backface-visibility:hidden,它为我修复了这样的奇怪行为过去,但没有结果。

有谁知道是否有解决办法?

(我还注意到,在 Firefox 中,边框总是呈锯齿状,在删除边框底部后也是如此。)

注意:我不想同时使用 :before 和 :after 伪元素,因为我已经在使用 :before 来达到另一种效果。

最佳答案

我似乎已经解决了这个问题。出于某种原因,只有当你使用三个边框时它才会变得参差不齐,但如果你只使用两个它会保持平滑。所以我把你的后面一分为二,然后为第三个边界做了一个前面。

Codepen of the solution 在这里输入代码

关于css - 伪元素边框上的锯齿状边缘,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25140006/

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