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

用CSS做圆角矩形

2015-08-01 14:59 661 查看
　　第一种方法：如果是CSS2.2的话，可以简单写一个制作圆角矩形，分上中下裁成三张图

<title>CSS3实现圆角</title>

<style type="text/css">

#box

{

　　width:200px;

　　height:30px;

　　background:url("../images/bt_bottom.jpg") no-repeat left bottom;

}

#box h1

{

　　width:200px;

　　height:20px;

　　text-indent:-9999px;

　　background:url("../images/bt_top.jpg") no-repeat left top;

}

/*下面这个是中间平铺的图，如果是纯色的话，可以直接写颜色值，也可以直接在上述box的背景上写上背景颜色*/

#box div#content

{

width:200px;

height:200px;

background:url("../images/bt_bg.jpg") repeat-y;

}

</style>

</head>

<body>

<div id="box">

<h1>标题</h1>

<div id="content"></div>

</div>

</body>

</html>


　　第二种方法：如果是使用CSS实现圆角的话，那么目前最简单的方法就是CSS3中的-moz-border-radius、-webkit-border-radius以及border-radius一起使用效果更佳，目前能支持CSS3的浏览器有IE9及以上版本，google chrome10以上版本，firefox4及以上版本。否则的话，只能使用图片来进行实现了，当然也可以使用css2，但是那个太过于麻烦。

下面我给你一个例子，你可以在以上我提到的相应浏览器中进行浏览，那样效果会更好！

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS3实现圆角</title>
<style type="text/css">

.box

{
　　width:200px;
　　height:200px;
　　background:#09F;
　　-moz-border-radius:8px;/*8px是圆角的角度，值越大则圆角效果越明显，如果修改此项，请修改以下两项的值，使之相同*/
　　-webkit-border-radius:8px;
　　border-radius: 8px;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>


请将以上代码复制粘贴后，保存为html文档即可，然后利用目前最新版的浏览器进行浏览即可看到如下效果：

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