Question

我正在开发一款背景为黑色的应用。主要内容区域为白色区域。白色区域将有圆角。在过去的几年里，这个应用程序依赖于一个大表。此表的单元格具有创建的图像以表示圆角。我正在更新此应用程序，我想使用更可敬的方法。出于这个原因，我正在寻求一些反馈。基本上，我的网站看起来像这样：

                         tab1 | tab2 | tab3
[corner]----------------       --------------------[corner]
   |                                                   |
   |                                                   |
   |                                                   |
   |                                                   |
   |                                                   |
  ...                                                 ...
   |                                                   |
[corner]-------------------------------------------[corner]

我使用ASP.NET MVC 4开始更新此应用程序。该模板具有以下内容：

<body>
    <header>
    ...
    <header>

    <div id="body">
    </div>
    <footer>

    </footer>
 </body>

在我有限的意见中，我觉得左上角/右上角应该在<header>中，而左下角/右下角应该在<footer>中。如果我这样做，我不知道如何使它全部排队。我感谢任何人都可以提供的任何建议或代码示例。我正努力让这一切都排好。

谢谢！

Answer 1

使用border-radius css属性来实现圆角的效果。例如，对于标题，您可能有

border-top-left-radius: 10px;
border-top-right-radius: 10px;

Excellent article here和Browser Support here

Answer 2

W3Schools在这里有一个很好的参考：http://www.w3schools.com/css3/css3_borders.asp
我自己也做了一个教程：http://www.andytechguy.com/tutorials/css/how-to-make-round-corners-css/

HTML中的圆角

2 个答案: