破损的CSS框与角图像

编辑：

使用了蒂姆的代码，它成功了！！！我唯一的问题是，如何使我的页眉独立于正文的其他部分，并像模板图像一样在屏幕上展开，而不从顶部和侧面进行任何填充？

以下是设计模板：设计模板

这是一个更新的代码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>

使用border-radius并丢弃图像。它会让你的生活更轻松，在高像素密度的显示器上看起来更清晰(不像GIF(。

演示：http://jsfiddle.net/QXqzd/1/
浏览器支持：http://caniuse.com/#feat=border-半径
更多示例：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>

我100%同意Tim的观点。我不确定现在CSS3是否有必要，但在过去，为了确保跨浏览器兼容性，除了边界半径之外，您还需要Mozilla和Safari/iPhone浏览器的额外代码：

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

不管怎样，为了安全起见，加上这两条额外的线都没有坏处。

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

.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/

相关内容

最新更新

热门标签：