css 圆角

最新推荐文章于 2024-10-07 16:29:52 发布

mybolide

最新推荐文章于 2024-10-07 16:29:52 发布

阅读量424

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/mybolide/article/details/17377985

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!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>
        <title>在线演示 - LHGCALENDAR</title>
<script type="text/javascript" src="http://bbs.job9151.com/images/DD_roundies_min.js"></script>
<script type="text/javascript">
DD_roundies.addRule('.websjy1', '5px 20px 3px 10px', true);DD_roundies.addRule('.websjy2', '5px', true);DD_roundies.addRule('.websjy3', '1000px', true);
</script>

<body>
<h3>效果1</h3>

<div style="border:1px solid #CCCCCC; width:200px; height:200px; background:#66FFFF; margin-bottom:10px;" class="websjy1">32423</div>
<h3>效果2</h3>

<div style="border:1px solid #CCCCCC; width:200px; height:200px; background:#EEE; margin-bottom:10px;" class="websjy2">32423</div>
<h3>效果3</h3>

<div style="border:1px solid #CCCCCC; width:200px; height:200px; background:#ff0000; margin-bottom:10px;" class="websjy3">32423</div>

</body>
        </html>

解决IE9不兼容的方案：



<style>
.websjy3{-moz-border-radius:500px;-webkit-border-radius:500px;border-radius:500px;}
.websjy2{-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
.websjy1{-moz-border-radius:5px 20px 3px 10px;-webkit-border-radius:5px 20px 3px 10px;border-radius:5px 20px 3px 10px;}
</style>