网页制作实例CSS用一张图片实现圆角(4) 第一种:H2可以加一个右边界这样H2的背景就不会在盖住cssbox_head的的那个角了; 第二种:反向思维,cssbox_head中加入一个右补白,这样H2中的背景图也不会盖住cssbox_head中的角; 这里我们选用第二种方法.
执行代码:
<!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{ 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; padding:10px 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 全部选择 提示:你可先修改部分代码,再按运行]
第四步