webkit边框半径问题

发布于 2024-11-04 05:13:54 字数 998 浏览 0 评论 0原文

这是我的问题：我正在显示一个覆盖层（使用 this），其中包含一个消息 div有圆角。

这是我的消息 div 的 css 代码：

#modal1
{
    margin-left: auto;
    margin-right: auto;
    display: none;
    width: 620px;
    height: 150px;
    position: relative;
    background-color: #FFF;

    border: 12px solid #FF771C;  
    -webkit-border-top-left-radius: 12px;
    -webkit-border-top-right-radius: 12px;
    -webkit-border-bottom-left-radius: 12px;
    -webkit-border-bottom-right-radius: 12px;

    text-align: center;
}

我的问题是我在左上角和右上角看到一个白色的“边框”（如果你仔细观察的话）。这是图片，您可以亲自查看。现在，我通过将 webkit 的左上角和右边框属性设置为 0px 来“解决”这个问题，但这不是一个解决方案，所以我问你是否有一些想法？顺便说一句，这只是为 chrome 开发的，这就是为什么代码中只有 -webkit 。

编辑：
我在他们的论坛上找到了解决方案 http://flowplayer.org/tools/forum/40/46850< /a>

原文

Here's my problem: I'm showing an overlay (using this) with a message div that has rounded corners.

Here is my css code for message div:

#modal1
{
    margin-left: auto;
    margin-right: auto;
    display: none;
    width: 620px;
    height: 150px;
    position: relative;
    background-color: #FFF;

    border: 12px solid #FF771C;  
    -webkit-border-top-left-radius: 12px;
    -webkit-border-top-right-radius: 12px;
    -webkit-border-bottom-left-radius: 12px;
    -webkit-border-bottom-right-radius: 12px;

    text-align: center;
}

And my problem is that I get a white "border" (if you look closely) in the upper left and right corners. Here is the image so you can see for yourself. Now, I "solved" this by putting top-left and -right border properties of webkit to 0px, but this is not a solution, so I'm asking if you have maybe some ideas? Btw, this is only developed for chrome that's why it's only -webkit up there in the code..

EDIT:
I found the solution on their forum http://flowplayer.org/tools/forum/40/46850

分享到QQ

分享到微博