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

2008-02-23 08:44:31来源:互联网 阅读 ()

新老客户大回馈,云服务器低至5折

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

  疑点:奇怪了,为什么实际上并不是我们想要的效果?我们在看一下问题出在哪,应该是我们定义的第三个角的背景图盖住了右上cssbox_head中的角,解决的方法有两种:
  第一种:H2可以加一个右边界这样H2的背景就不会在盖住cssbox_head的的那个角了;
  第二种:反向思维,cssbox_head中加入一个右补白,这样H2中的背景图也不会盖住cssbox_head中的角;
  这里我们选用第二种方法.

.cssbox_head{
background-position:top right;
padding-right:10px;
}
.cssbox_head h2{
background-position:top left;
padding:10px 0 10px 10px;
}

  执行代码:

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

第四步
  这一步和第三步很相似,这里就不会在犯错误了,根据实际情况只能选用第一种方法.
  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;
padding:10px 0 10px 10px;
}
.cssbox_body{
background-position:bottom left;
margin-right:10px; /* interior-padding right */
padding:0px 0 10px 10px;
}

  完整的代码:

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:用CSS控制图片自适应大小的方法

下一篇:用CSS打造一个超酷的具有立体感效果的导航