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

最新推荐文章于 2021-08-03 19:04:47 发布

大11

最新推荐文章于 2021-08-03 19:04:47 发布

阅读量1.1k

点赞数

分类专栏：网页制作文章标签： css xhtml div class url 浏览器

本文链接：https://blog.csdn.net/wjp674321363/article/details/7036692

版权

网页制作专栏收录该内容

1 篇文章 0 订阅

订阅专栏

老师教了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

大11

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
关于本人第一次写css圆角矩形的心得，请勿喷我...

老师教了HTML/CSS/JavaScript，作业中有要求做圆角矩形（背景图做圆角），仅仅给你两张圆角图片，不会做怎么办？第一次上网研究了一个晚上，基本上都是无图做圆角矩形的，而且也相对较为复杂，简单的呢，对于我这个菜鸟也尤如天书，后来做不下去了就发了条信息给了老师求助，不过没回，如何我就怀着忐忑的心情投入了使命召唤的怀抱里，第一天的晚上就在游戏中拉下了帷幕..... 第二天依旧是老地
复制链接

扫一扫