1.css3實現圓角矩形,兼容性有問題
<div id="round"></div> #round { padding:10px; width:300px; height:50px; border: 5px solid #dedede; -moz-border-radius: 15px; /* Gecko browsers */ -webkit-border-radius: 15px; /* Webkit browsers */ border-radius:15px; /* W3C syntax */ }
css3的,很多小的瀏覽器不兼容,360之類的.
2.拼圖的方法實現圓角矩形
<style type="text/css"> .b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b{display:block;overflow:hidden;} .b1,.b2,.b3,.b1b,.b2b,.b3b{height:1px;} .b2,.b3,.b4,.b2b,.b3b,.b4b,.b{border-left:1px solid #999;border-right:1px solid #999;} .b1,.b1b{margin:0 5px;background:#999;} .b2,.b2b{margin:0 3px;border-width:2px;} .b3,.b3b{margin:0 2px;} .b4,.b4b{height:2px;margin:0 1px;} .d1{background:#F7F8F9;} .k {height:300px;} </style> </head> <body> <div> <b class="b1"></b><b class="b2 d1"></b><b class="b3 d1"></b><b class="b4 d1"></b> <div class="b d1 k"> <font style="font-size:26px;color:red; margin:0px 10px;">簡潔型css圓角矩形</font> </div> <b class="b4b d1"></b><b class="b3b d1"></b><b class="b2b d1"></b><b class="b1b"></b> </div>
不過這個在ie7下有問題,下面的會和上面的脫節,所以最好用css hack解決一下.~
3,直接圖片吧,最簡單的方式
不過自適應高度的話有些問題,所以小改進一下
<style> .top{backgroup:上邊帶弧度的一小部分} .bottom{backgroup:下邊帶弧度的一小部分} .content{border-left:1px solid 顏色;border-right:1px solid 顏色} </style> <p class="top"></p> <div class="content"></div> <p class="bottom"></p>
這種方式可能也有兼容性的問題,用position解決吧..
最近寫網頁發現一個問題.~在出現兼容性的問題的時候,發現ie7下和360下是完全一樣的問題。。所以如果老闆要必須兼容360瀏覽器的話,那就解決了ie7就可以了~
喜歡討論的朋友可以加羣252799167