关于本人第一次写css圆角矩形的心得，请勿喷我...

来源：互联网发布：细说php第四版电子书编辑：程序博客网时间：2024/04/28 04:30

老师教了HTML/CSS/JavaScript，作业中有要求做圆角矩形（背景图做圆角），仅仅给你两张圆角图片，不会做怎么办？第一次上网研究了一个晚上，基本上都是无图做圆角矩形的，而且也相对较为复杂，简单的呢，对于我这个菜鸟也尤如天书，后来做不下去了就发了条信息给了老师求助，不过没回，如何我就怀着忐忑的心情投入了使命召唤的怀抱里，第一天的晚上就在游戏中拉下了帷幕.....
第二天依旧是老地点，老时间，继续昨天的代码研究，打开QQ，发现老师回了信息：“用背景图实现的圆角，标题在左上角做背景图，div在右下角做背景图”我扫了一下内容，便“股沟”了一下关键字“背景图+圆角矩形”，这一下解决了我昨天没有思路的难题，其中#box是背景图制作圆角矩形的代码，请看代码部分。

<!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" lang="en" xml:lang="en"><head><title>整站原效果</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /></head><style type=text/css>body{background-color:#D5D6BE;}ul {  list-style-type:none;  list-style-image:url(images/li-bullet.gif);  }  .h{text-indent:1em;color:#00BB00;}#box{background:url(images/right.gif) no-repeat right bottom,url(images/left.gif) no-repeat left top;//插入两张圆角背景图片，用，隔开。background-color:white;margin:20px 0px 0px 35%;//分别代表上，右，下，左.margin表示设置此div距离浏览器上，右，下，左的像素。width:314px;height:180px;padding:1px 4px 1px 10px;//分别代表上，右，下，左。padding表示在div内，设置文字距离div的上，右，下，左的像素。}ul li{margin:5px;padding:0px;list-style-type:none;}</style><body><div id="box"><h3 class="h">我们推荐：</h3><ul><li><a href="#">官方网站</a></li><li><a href="#">imdb链接</a></li><li><a href="#">2011-2012 新片档期</a></li><li><a href="#">北美周末票房榜冠军影片</a></li><li><a href="#">2011年国内公映的影片</a></li></ul></div><div  id="box"><h3 class="h">About Us</h3><ul><li><a href="#">图书</a></li><li><a href="#">音乐</a></li><li><a href="#">博客</a></li><li><a href="#">联系我们</a></li></ul></div></body></html>

时间不早了，有图的圆角矩形的制作方法介绍至此，日后将更新无图圆角矩形的制作方法，请多多关注。
我的联系方式：QQ:154509099 Web：www.zdxy.tk