圆角div

 

基于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"><!-- rc("round1"); function rc(o){ o = document.getElementById(o); o.innerHTML = '<b class="r"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>' + o.innerHTML + '<b class="r"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>'; } // --></mce:script>

你可能感兴趣的:(html,function,Opera,Class,div,behavior)