标签:
<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文档即可,然后利用目前最新版的浏览器进行浏览即可看到如下效果:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#sub1
{
width:200px;
height:200px;
border-radius:15px;
background-color:#093
}
</style>
</head>
<body>
<div id="parent">
<div id="sub1"></div>
</div>
</body>
边框圆角化方式(原文链接http://www.cnblogs.com/SJP666/p/4678730.html)
标签:
原文地址:http://www.cnblogs.com/zyh-club/p/4702971.html