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

DIV+CSS实现圆角

2008-07-16 09:36 525 查看

原理就是在一个层上加二到三个层，不过这些层只有左右边线，最上和最下有背景色，然后它们都有长度差距，就这样了，以下是我做的例子：

<html

<head>

<title>无标题页</title>

<style>

.up1

{

overflow:hidden;

height:1px;

margin-left:4px;

margin-right:4px;

background-color: Aqua;

border-left:solid 1px Aqua;

border-right:solid 1px Aqua;

}

.up2

{

overflow:hidden;

height:1px;

margin-left:3px;

margin-right:3px;

border-left:solid 1px Aqua;

border-right:solid 1px Aqua;

}

.up3

{

overflow:hidden;

height:1px;

margin-left:2px;

margin-right:2px;

border-left:solid 1px Aqua;

border-right:solid 1px Aqua;

}

.content

{

margin-left:1px;

margin-right:1px;

height:100px;/*这里控件高度*/

/*background-color: Aqua;*/

border-left:solid 1px Aqua;

border-right:solid 1px Aqua;

}

.down1

{

overflow:hidden;

height:1px;

margin-left:2px;

margin-right:2px;

border-left:solid 1px Aqua;

border-right:solid 1px Aqua;

}

.down2

{

overflow:hidden;

height:1px;

margin-left:3px;

margin-right:3px;

border-left:solid 1px Aqua;

border-right:solid 1px Aqua;

}

.down3

{

overflow:hidden;

height:1px;

margin-left:4px;

margin-right:4px;

background-color: Aqua;

border-left:solid 1px Aqua;

border-right:solid 1px Aqua;

}

.cell

{

width: 50px;/*这里控制宽度*/

}

</style>

</head>

<body>

<div class="cell">

<div class="up1">

</div>

<div class="up2">

</div>

<div class="up3">

</div>

<div class="content">

这里放内容

</div>

<div class="down1">

</div>

<div class="down2">

</div>

<div class="down3">

</div>

</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航