网页制作实例CSS用一张图片实现圆角

	设为首页		友情链接
	在线留言		发表文章
	加入收藏		广告联系

服务器

小说专版

数据库

Solaris

专题：

SOA

您现在的位置：刺猬宫 >> 网络编程 >> CSS >> 教程正文

用户登录

新用户注册

专题栏目

　　网页制作实例CSS用一张图片实现圆角

网页制作实例CSS用一张图片实现圆角

und-position:bottom left;
margin-right:10px; /* interior-padding right */
padding:0px 0 10px 10px;
}

　　完整的代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <HTML xmlns="http://www.w3.org/1999/xhtml"> <HEAD> <TITLE>Untitled Document</TITLE> <META http-equiv=Content-Type content="text/html; charset=utf-8"> <STYLE type=text/css> *{ padding:0; margin:0; } .cssbox,.cssbox_head,.cssbox_head h2,.cssbox_body{ background: transparent url(http://www.webjx.com/upfiles/20070630/20070630213028_01.png) no-repeat; } .cssbox{ background-position:bottom right; width:380px; margin:20px auto; } .cssbox_head{ background-position:top right; padding-right:10px; } .cssbox_head h2{ background-position:top left; margin:0; padding:10px 0 10px 10px; } .cssbox_body{ background-position:bottom left; margin-right:10px; /* interior-padding right */ padding:0px 0 10px 10px; } </STYLE> <META content="MSHTML 6.00.2900.2995" name=GENERATOR> </HEAD> <BODY> <DIV class=cssbox> <DIV class=cssbox_head> <H2>标题</H2> </DIV> <DIV class=cssbox_body> <P>内容</P> </DIV> </DIV> </BODY> </HTML>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

最终效果图

　　终于完成我们的＂大作＂了！从上面我们可以看出，定义这种效果的样式是先从父元素到子元素定义的，也就是从外层向内层定义，这是因为，越是内层的的图／背景，它在显示时确是在外层的．
　　在内容区如果P或其它元素有边界的情况下会出现边界叠加现象，在这里只要给cssbox_body加入一个1PX下补白就可以解决这种问题的发生，关于边界叠加见网站中＜边界叠加＞这篇文章．

上一页 [1] [2]

频道声明：本频道的文章除部分特别声明禁止转载的专稿外，可以自由转载.但请务必注明出出处和原始作者文章版权归本频道与文章作者所有.对于被频道转载文章的个人和网站,我们表示深深的谢意。

原始作者:佚名	录入时间:2007-7-13 15:46:39
信息来源:不详	投稿信箱:itqoo@126.com

教程录入：itqoo 责任编辑：itqoo

上一个教程：用CSS打造一个超酷的具有立体感效果的导航

下一个教程：用CSS控制图片自适应大小的方法

【字体：小大】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】

　网友评论：（只显示最新10条。评论内容只代表网友观点，与本站立场无关！）

- 关于我们 - 合作伙伴 - 友情链接 - 广告刊登 - 投稿热线 - 在线留言 - 版权声明 - 联系方式 -
	IT公社版权所有粤ICP备05127012号
	Copyrigh@2005-2006 itqoo.com.Inc All Rights Reserved 推荐分辨率 1024*768
	联系站长：E-Mail:itqoo@126.com MSN:urchincc@hotmail.com QQ:
	特别感谢:亿太网络提供空间支持