Google Chrome 上的 CSS 边框问题

发布于 2024-12-02 16:24:02 字数 524 浏览 0 评论 0原文

我在我的网站的 css 中遇到不同边框颜色和边框半径的问题。

我创建了一个框,并在框的顶部添加了一个边框,如下图所示。

但是,我希望顶部边框拉伸盒子的整个宽度,但这似乎是一个问题。此问题仅在 PC 上的 Google Chrome 上出现,在 Safari 和 Internet Explorer 上似乎没问题。

#box {
    width:250px;
    height: 250px;
    background: #acacac;
    position: absolute;
    right:10px;
    top:315px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-top: 45px solid white;
}

I'm having trouble with different border colours and border-radius in css for my website.

I have created a box and added a border just to the top of the box as shown in the image below.

However, I wanted the top border to stretch the whole width of the box but the seems to be a problem. This problem only occurs with Google Chrome on pc, it seems fine on Safari and Internet Explorer.

#box {
    width:250px;
    height: 250px;
    background: #acacac;
    position: absolute;
    right:10px;
    top:315px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-top: 45px solid white;
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

天冷不及心凉 2024-12-09 16:24:02

这是 CSS 边框的问题,也是您创建在某些博客中看到的箭头的方式的问题。这是如何实现圆角边框的限制。

This is an issue with CSS borders and it's how you create the arrows that you see in some blogs. This is a limitation of how you can implement borders with rounded corners.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文