Question

编辑：

蒂姆使用的代码，它工作了!!! 我唯一的问题是如何使我的标题独立于身体的其他部分，并在模板图像中横跨屏幕，而没有从顶部和侧面填充任何内容？

这是更新的代码html + css：

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Rounded Corner Tutorial</title>
            <style type="text/css">
            body{padding: 10px; background-color: #e8e8e8; font-family: Arial, Helvetica, sans-serif; font-size:12px;}
            h1{padding: 0px; margin: 0px;}

            #container{

                    margin:0px auto;
                    border:0px solid #bbb;
                    padding:0px;
                    }
            .white-box{width: 180px; margin: 0px;}


            #main-header {
                border:1px solid #bbb;
                height:80px;
                padding:10px;
                background:#FFF
            }

            #main-content {
                margin-top:10px;
                padding-bottom:10px;
            }

            #main-body {
                margin-left:10px;
                width:666px;
                height:150px;
            }

            #main-footer {

                margin-top:10px;
                margin-bottom:10px;
            padding:10px;
            border:1px solid #bbb;

            }   


            .box {
                padding: 8px;
                border: 1px solid silver;
                -moz-border-radius: 8px;
                -o-border-radius: 8px;
                -webkit-border-radius: 5px;
                border-radius: 8px;
                background-color: #fff;
            }

            .box1 {
                width: 200px;
                float: left;
            }

            .box2 {
                margin-left: 224px; 
            }


            </style>
            </head>
            <body>

            <div id="container">

            <div id="main-header">Main Header</div>
                <div id="main-content">

                    <div class="box box1">
                    left
                    </div>

                    <div class="box box2">
                    <p>Main Bbody 1...</p>
                    </div>

                </div>

                <div id="main-footer">Main Footer</div>
            </div>

            </body>
            </html>

Answer 1

使用border-radius并丢弃图像。它将使您的生活更轻松，并且在具有高像素密度的显示器上看起来很清晰（与GIF不同）。

演示：http://jsfiddle.net/QXqzd/1/
浏览器支持：http://caniuse.com/#feat=border-radius
更多示例：http://muddledramblings.com/table-of-css3-border-radius-compliance/

重要部分

.box {
    padding: 8px;
    border: 1px solid silver;
    -moz-border-radius: 8px; /* older versions of FF */
    border-radius: 8px; /* IE9+, Webkit, etc. */
    background-color: #fff;
}

所有CSS

我创建了一个粗略的CSS样式表来匹配您的模板。

body { 
    background-color: #eee; 
}

.box {
    padding: 8px;
    border: 1px solid silver;
    -moz-border-radius: 8px;
    border-radius: 8px;
    background-color: #fff;
}

.box1 {
    width: 200px;
    float: left;
}

.box2 {
    margin-left: 224px;    
}

<强> HTML

<div class="box box1">
    left
</div>

<div class="box box2">
    right
</div>

Answer 2

我同意蒂姆的100％同意。我不确定现在是否有必要使用CSS3，但在过去，为了确保跨浏览器兼容性，除了border-radius之外，还需要为Mozilla和Safari / iPhone浏览器添加其他代码：

.box {
    padding: 8px;
    border: 1px solid silver;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 5px;
    background-color: #fff;
}

无论哪种方式，添加这两条额外的线都没有坏处，只是为了安全起见。

Answer 3

我有一个建议代码，可以解决您的问题：

.your_css_rounded_column {
   border: 1px solid #cdcdcd;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    -webkit-border-radius: 5px;
    background-color: #fff;
}

检查这个小提琴：http://jsfiddle.net/yYjrB/

破碎的CSS - 带有角落图像的盒子

3 个答案: