文章/答案/技术大牛

发布

社区首页 >问答首页 >-webkit-边框-半径看起来很难看

问-webkit-边框-半径看起来很难看
EN

Stack Overflow用户

提问于 2011-04-10 22:10:21

回答 2查看 8K关注 0票数 4

我正在使用以下属性设置lightbox div的样式：

#lightbox {
  border: 0.3em solid #acaeb0;
  -webkit-border-radius: 1em;
  background: #eee -webkit-gradient(linear, 0% 60%, 0% 100%, from(#eee), to(#ccc));
  -webkit-box-shadow: 0 0 0.6em 0.3em #888;
}

问题是，产生的圆角看起来非常丑陋(使用safari5)：

问题是圆角的空白处。你知道我如何避免这种行为吗？

编辑:添加-webkit-background-clip: padding-box;属性后，它看起来更好，但并不完美：

我缩小了边框的宽度，但粗框看起来是一样的。我需要设置另一个属性才能使它看起来完美吗？

EDIT2:似乎是webkit的一个漏洞：https://bugs.webkit.org/show_bug.cgi?id=21819

html

safari

webkit

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2011-04-10 22:44:59

这被称为“背景出血”。

要获得可能的修复，请查看此站点：http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed。

正如它所说的，你应该尝试设置：

-webkit-background-clip: padding-box;

票数 14

Stack Overflow用户

发布于 2011-09-01 09:16:27

我在Chrome中遇到了这个问题，当使用1px的边框时，使用2px或更高的边框看起来很好。铬:13.0.782.218m

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/5612297

复制

相似问题

问-webkit-边框-半径看起来很难看
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问-webkit-边框-半径看起来很难看EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问-webkit-边框-半径看起来很难看
EN