设为首页  
联系我们  
加入收藏  
网页制作 冲浪宝典 图形图像 操作系统 软件教学 编程开发 认证考试 安全技术 站长专区 文学驿站 娱乐天地 游戏天地 办公软件
文章搜索
您的位置: 首页 >> 文章首页 >> 网页制作 >> CSS >> 网页制作实例CSS用一张图片实现圆角
精品推荐
CSS点击TOP10
·常用CSS大全
·DIV CSS网页布局实例解析:实现表格形式
·网页特效代码:纯CSS制作的网页下拉菜单
·网页排版CSS教学
·实现CSS图片边框效果的方法
·改变IE的字体大小设置时,页面字体不发生改变,怎样实现?
·CSS中文教程
·网页制作实例CSS用一张图片实现圆角
·网页制作小工具大全(下)
·让css使网页图片半透明
网页制作点击TOP10
·菜鸟架设动网论坛全教程
·网页模板的使用方法 (教程)
·网页对联广告代码效果大全
·初学者入门:如何学习网页制作?
·用JavaScript实现文件图片滚动效果
·常用CSS大全
·网页自动转向代码
·图片循环滚动完美解决
·DIV CSS网页布局实例解析:实现表格形式
·JS表格排序新法
精选专题

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

作者: 来源:http://www.xgdown.com/ 时间:2007-7-1 10:21:44

网页制作实例CSS用一张图片实现圆角(2)   我们定义右上角的样式,这一步也不难做到,因为定义背景图定义在右上,背景图圆角外部分又不是透明,而是白色,所以白色区盖住cssbox_body的绿色部分.
  CSS代码

{
 padding:0;
 margin:0;
}
.cssbox,.cssbox_head
 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;
}

  浏览器中看到的效果见下图:

<!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{ 
    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;
}

</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>
共6页 9 7 [1] [2] [3] [4] [5] [68 :>
网页制作实例CSS用一张图片实现圆角 相关软件:
网页制作实例CSS用一张图片实现圆角 相关文章:
特别声明:本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载,但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站,我们表示深深的谢意。如果本站转载的文章有版权问题请联系编辑人员,我们尽快予以更正。
转载请注明来源:http://www.xgdown.com