CSS圆角 [英] CSS Rounded corners

问题描述

我已经看到了很多代码，但它似乎不是他们的工作非常好或在所有。我使用图片的圆角，但我需要的代码，使其围绕< table> 的边框。我发现这个问题的唯一解决方案是在边框的单元格中有图像。

 >  selector {
 -moz-border-radius：3px; 
 -webkit-border-radius：3px; 
 border-radius：3px; 
} 
  

这将在Firefox，Safari，Chrome和任何其他CSS3兼容的浏览器。为此可能更容易做一个单独的类 - 有3个语句是完全兼容性所需要的。

此外，请尝试这里（cssjuice.com）一些更多的技术使用图像。

我不完全确定这是否可以使用表，但如果你完全控制 - 不要使用< ; table> 用于布局。请注意。

（注意 - 我认为对表格数据使用表格标签，只是不应使用DIV）。

更新：仅适用于一个角：

  -moz- border-radius-topleft：3px; 
 / * ... * / 
 -webkit-border-top-left-radius：3px; 
  

继续 topright 或右上角。

I've seen a lot of codes for this but it appears non of them work very well or at all. I've used pictures for rounded corners but I need the code so that it will round the border of a <table>. The only solutions I've found for this problem are to have images In the cells around the border. Anything else I can try?

解决方案

Try:

selector {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

This will work in Firefox, Safari, Chrome and any other CSS3-compatible browser. It may be easier to make a separate class for this - there are 3 statements which are needed for full compatibility.

Also, try here (cssjuice.com) for some more techniques using images.

I'm not completely sure whether this will work with a table, but if you're in complete control - don't use a <table> for layout. Please.

(Note - I think its fine to use the table tag for tabular data, just not where DIVs should be used.)

Update: to apply to one corner only:

-moz-border-radius-topleft: 3px;
/* ... */
-webkit-border-top-left-radius: 3px;

Continue for topright or top-right.

这篇关于CSS圆角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！