圆角div

来源：互联网发布：javascript下载编辑：程序博客网时间：2024/06/05 23:45

基于VML的实现

<html xmlns:v>
<head>
<style>
v/:*{behavior: url(#default#VML);}
</style>
</head>
<body>
<v:roundRect style="width:200px;height:140px;" FillColor="#AAEAFA" Filled="T" />
</body>

只有ie支持，moz和opera都无法显示。

基于CSS+HTML的实现

style type="text/css">div.roundedcorner{background: #3a6ea5; width: 200px; color:white}b.r {display:block;background: #fff}b.r b {display:block;height: 1px;overflow: hidden; background: #3a6ea5}b.r1{margin: 0 5px}b.r2{margin: 0 3px}b.r3{margin: 0 2px}b.r b.r4{margin: 0 1px;height: 2px}</style><div class="roundedcorner"> <b class="r"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b> <div style="padding-left:14px;" mce_style="padding-left:14px;"> Your web, your choise </div> <b class="r"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b></div>

<支持。

可以用js整理一下代码。

<div class=roundedcorner id=round1><div style="padding: 3px" mce_style="padding: 3px">样式1</div></div><mce:script type="text/javascript"></mce:script>