HTML/CSS圆角矩形？

Question

是否可以在不使用图像的情况下创建带圆边的矩形？例如:

谢谢.

Answer 1

这是了解任何div的圆形边框的好教程:

http://www.css3.info/preview/rounded-border/

或者您可以像这样围绕某个div的边框:

#div1 {
-moz-border-radius: 15px; //for mozilla support
-webkit-border-radius: 15px; //for chrome support
border-radius: 15px;
}

简而言之:

您可以根据需要组合这些.-webkit-...只会被WebKit浏览器识别(Chrome,Safari),-moz-...只能被基于Mozilla的浏览器识别(Firefox).

编辑:

您只能将border-radius应用于td,而不是tr或table.我通过使用这些样式来解决圆角桌:

table { border-collapse: separate; }
td { border: solid 1px #000; }
tr:first-child td:first-child { -webkit-border-top-left-radius: 15px; }
tr:first-child td:last-child { -webkit-border-top-left-radius: 15px; }
tr:last-child td:first-child { -webkit-border-top-left-radius: 15px; }
tr:last-child td:last-child { -webkit-border-top-left-radius: 15px; }

希望这可以帮助.