开发者

-webkit-border-radius looks ugly

I'm styling a lightbox div with the following properties:

#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;
}

Problem is that the resulting rounded corners looks very ugly (using safari5):

-webkit-border-radius looks ugly

Problem is the white space at the rounded corner. Do you know how I can avoid this behavior?

EDIT: After adding the -webkit-background-clip: padding-box; property it looks better but not perfect:

-webkit-border-radius looks ugly

I reduced th开发者_JAVA百科e width of the border but it looks the same with thick borders. Do I have to set another property to make it perfect looking?

EDIT2: Seems to be a Bug of webkit: https://bugs.webkit.org/show_bug.cgi?id=21819


This is called "background bleeding".

For a possible fix, take a look at this site: http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed.

As it says, you should try setting:

-webkit-background-clip: padding-box;


The only hack which gave me satisfaction on a similar case was to wrap a box within another : one with the background, the second with the border, both with the same border-radius but the first one with a transparent border. And the code comes like this :

.fist-block {background: black; border-radius: 20px; border: 0px solid transparent;}
.second-block {border-radius:20px; border: 1px solid red;}


I get this problem in Chrome when using a 1px border however using 2px and above looks fine. Chrome: 13.0.782.218 m

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜