CSS+Jquery实现页面圆角框方法大全

2020-05-17 06:23:00易采站长站整理


生成的HTML代码:

<div class=”corner”><div class=”cortop”><div class=”bgcortopl”/><div class=”bgcortopr”/></div>
<div class=”bnlist detail”>
<input type=”submit” id=”ctl00_CphContent_btsearch” value=”查询” />
<input type=”submit” value=”导出” name=”ctl00$CphContent$ctl00″/>
<input type=”submit” id=”ctl00_CphContent_btnPrint” value=”打印”/>
<input type=”submit” value=”连续打印” />
</div>
</div>
<div class=”corbom”><div class=”bgcorboml”/><div class=”bgcorbomr”/></div>

第三步:编辑CSS样式,实现你想要的圆角样子。

总结:以上只要将要做圆角的DIV块的源码中class=”corner”,通过调用JS代码后就可以生成想要做圆角背景的div标签,就不需要每做一个圆角块手动添加那些代码,这样就使得工作简单,源文件也清晰精简,方便研发人员和UI人员。