如何实现div元素上面两个角是圆角啊,下面的两个不是圆角

如何实现div元素上面两个角是圆角啊,下面的两个不是圆角

解决方案 »

  1.   

    border-radius: 8px 8px 0px 0px;
      

  2.   

    圆角的方法有很多的，最简单的就是，固定宽度的那种，找一个圆角的图片，把它当做背景放在div的顶端，就可以了。也有一些需要用几个div组合实现。或者有一个css3中的border-radius，不过这个属性支持度并不高，应该还用的不多。
      

  3.   


    #x{border-top-right-radius:10px;border-top-left-radius:10px;}如果是IE，则头部声明
    <meta http-equiv="X-UA-Compatible"content="IE=9"/>
      

  4.   

    怎么可能呢，你看一下div的id绑没绑错<style type="text/css">
    #div1{border-top-right-radius:10px;border-top-left-radius:10px;}
    </style>
    <div id="div1">
    这个DIV需要有高宽和背景属性
    </div>PS:圆角特性对于IE浏览器只支持9及以上版本
    别忘了加<meta http-equiv="X-UA-Compatible"content="IE=9"/> 
      

  5.   

    firefox, chrome, ie9+ 用css样式，　如#2楼所说的就可以了。　你想兼容ie9以下，　还是老老实实用图片吧
      

  6.   

    <!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>最原始的圆角框</title>
    <style type="text/css">
    *{margin:0;padding:0;font-size:12px;}
    .wrapper{width:80%;margin:0 auto;}
    /*通用样式--容器宽度值*/
    .sharp{width:30%;margin:20px auto 0;float:left;margin-right:2%;}
    .sharp .content div{padding:10px;text-indent:2em;}
    .content{height:180px;}
    h3{height:29px;line-height:29px;font-size:12px;text-indent:10px;}
    a:link,a:visited{color:#999;font-weight:bold; text-decoration:none;}
    a:hover{text-decoration:none; border-bottom:1px orange solid;color:orange;}/*上圆角框通用设置样式，如果要运用多个不同颜色，以下6句不用重新变化--------------------------------*/
    .b1,.b2,.b3,.b4,.b5,.b6,.b7,.b8{height:1px; font-size:1px; overflow:hidden; display:block;}
    .b1,.b8{margin:0 5px;}
    .b2,.b7{margin:0 3px;border-right:2px solid; border-left:2px solid;}
    .b3,.b6{margin:0 2px;border-right:1px solid; border-left:1px solid;}
    .b4,.b5{margin:0 1px;border-right:1px solid; border-left:1px solid; height:2px;}
    .content {border-right:1px solid;border-left:1px solid;overflow:hidden;}
    /*颜色方案一,蓝色边框----------------------------------------*/
    /*下面第一、二句决定边框颜色，第三句决定背景颜色*/
    /*边框色*/
    .color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .content{border-color:#96C2F1;}
    .color1 .b1,.color1 .b8{background:#96C2F1;}
    /*背景色*/
    .color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .content{background:#EFF7FF;}
    </style>
    </head><body>
    <div class="wrapper">
        <!--风格一，只需要变换一个CLASS就可以换一种颜色-->
        <div class="sharp color1">
            <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b> 
            <div class="content">  
            </div>
            <b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b>    
        </div>
    </div>
    </body>
    </html>