css圆角的多种实现方法

一.css script背景图片法

现在我想把如下图片的粉色部分当做背景图片插入到页面里：

最终效果如图：

实现的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css圆角的多种实现方法-禅意花园</title>
<style type="text/css">
#top,#low{ background:url(jee.gif);}
#top{width:251px;height:30px; background-position: -230px -79px;}
#middle{    
	border-left: 1px solid #FDD79D;
    border-right: 1px solid #FDD79D;
	width:248px;
	height:200px;
 	}
#low{width:251px;height:6px; background-position: -230px -119px}
</style>
</head>

<body>
	<div id="top"></div>
    <div id="middle">图片法实现圆角，要用到cssscript方法</div>
    <div id="low"></div>
</body>
</html>

 

 

posted @ 2013-01-17 19:17  -禅意花园-  Views(317)  Comments(0)    收藏  举报