您的位置：首页 > Web前端 > CSS

CSS实现圆角的三种方法

2008-05-19 08:46 686 查看
/*第一种：*/

<Html>

<head>

<style>

#a{

border-left:1px #333 solid;

border-right:1px #333 solid;

width:300px;

height:500px;

}

.b{

height:1px;

overflow:hidden;

border-left:1px #333 solid;

border-right:1px #333 solid;

}

</style>

</head>

<body>

<div>

<div class="b" style="margin-left:3px;width:294px;background:#333"></div>

<div class="b" style="margin-left:2px;width:296px;"></div>

<div class="b" style="margin-left:1px;width:298px;"></div>

<div id="a">

</div>

</div>

</body>

</Html>
/*第二种：*/

<html>

<head>

<title>css圆角效果</title>

<meta http-equiv="content-type" c>

<style type="text/css">

div.RoundedCorner{background: #9BD1FA}

b.rtop, b.rbottom{display:block;background: #FFF}

b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA}

b.r1{margin: 0 5px}

b.r2{margin: 0 3px}

b.r3{margin: 0 2px}

b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}

</style>

</head>

<body>

<div class="RoundedCorner">

<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>

<br>无图片实现圆角框<br><br>

<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>

</div>

</body>

</html>
/*第三种：*/

<style>

.divfloat {

margin:0 0 10px 0;

background: transparent;

}

.roundtop,.roundbottom{

display:block;

font-size:1px;

width: 100%;

background:transparent;

}

.roundb1,.roundb2,

.roundb3,.roundb4 {

display:block;

overflow:hidden;

}

.roundb1,.roundb2,.roundb3 {

height:1px;

border-left:1px solid #9B9B9B;

border-right:1px solid #9B9B9B;

background:#F3F3F3;

}

.roundb1 {margin:0 5px;background:#9B9B9B;}

.roundb2 {margin:0 3px;border-width:0 2px;}

.roundb3 {margin:0 2px;}

.roundb4 {

height:2px;

margin:0 1px;

border-left:1px solid #9B9B9B;

border-right:1px solid #9B9B9B;

background:#F3F3F3;

}

.roundboxcontent {

display:block;

padding:5px;

height:100%;

overflow:hidden;

border:0 solid #9B9B9B;

border-width:0 1px;

background:#F3F3F3;

}

</style>

<div class="divfloat">

<b class="roundtop">

<b class="roundb1"></b>

<b class="roundb2"></b>

<b class="roundb3"></b>

<b class="roundb4"></b>

</b>

<div class="roundboxcontent">

<div class="sidebarwrap">

这是圆角div内容部分

</div>

</div>

<b class="roundbottom">

<b class="roundb4"></b>

<b class="roundb3"></b>

<b class="roundb2"></b>

<b class="roundb1"></b>

</b>

</div>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航