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

纯CSS+DIV实现圆角的三种方法(create a round corner DIV by pure CSS)

2008-09-02 16:30 846 查看

方法一：使用"•"来当圆角：

Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<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>

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

标签：

相关文章推荐

新的分享

章节导航