当前位置：文江博客话题详情

div 边框半径问题（在 Firefox 和 Opera 上）

发布于 2024-12-09 19:58:01 字数 371 浏览 1 评论 0原文

正如你所看到的，有两张图片。首先，在 chrome 上。右侧有 Beğen 和 Yorumlar 按钮。边框看起来非常好。

但第二张图片显示； firefox 和 opera 有边框半径问题。我尝试做 border-witdh:thin、border:1px Solid 等。但它看起来一样。

怎么办呢？你有什么想法吗？

抱歉我的英语不好。谢谢

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

发布评论

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

深爱成瘾 2024-12-16 19:58:01

这种效应通常称为“背景渗色”或“泄漏”。它可以通过一些简单的 CSS 来修复：

-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;

我首先从 Mike Harding 的博客中了解到这一点：
http://tumble.sneak.co.nz/post/928998513 /修复背景出血

这是 W3C 规范：
http://www.w3.org/TR/css3-background/ #the-background-clip

This effect is commonly referred to as "background bleed", or "leaking". It can be fixed through some simple CSS:

-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;

I first learned of this from Mike Harding's blog:
http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed

And here's the W3C spec:
http://www.w3.org/TR/css3-background/#the-background-clip

回复收藏 0 原文

海风掠过北极光 2024-12-16 19:58:01

...看起来几乎可以在不使用边框的情况下逃脱。按钮和背景之间有足够的对比度。您是否尝试过使用 1px（模糊半径）的外发光？

-moz-box-shadow: [position-x] [position-y] [blur-radius] [color];
-webkit-box-shadow: [position-x] [position-y] [blur-radius] [color];
box-shadow: [position-x] [position-y] [blur-radius] [color];

... it almost looks like may get away without using border at all. There's enough contrast between the button and the background. Did you try using outer glow of 1px (blur-radius)?

-moz-box-shadow: [position-x] [position-y] [blur-radius] [color];
-webkit-box-shadow: [position-x] [position-y] [blur-radius] [color];
box-shadow: [position-x] [position-y] [blur-radius] [color];

回复收藏 0 原文