
	精品推荐


特别推荐


热点TOP10

·html教学+HTML语法大全

·图片左右循环连续滚动代码，解决marquee的留白问题

·网页设计基础:Div+CSS布局入门教程

·下拉列表框1下拉列表框2(HTML版)

·HTML标记全集

·解析Html页面:HTML Parser的试用

·在HTML网页中添加WMV格式播放器代码

·中国地区三级联动下拉菜单代码和示例(附带代码下载)

·CSS标准网页设计UL和DIV使用的技巧总结

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

日期：2007年7月1日作者：查看:[大字体中字体小字体]

　　我们定义右上角的样式，这一步也不难做到，因为定义背景图定义在右上，背景图圆角外部分又不是透明，而是白色，所以白色区盖住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>
  </DIV>
</DIV>
</BODY>
</HTML>

第三步
　　经过以上的两步我们已经做了出两个角了，在接着做第三个角，定义在H2中也就是左上角．为了美观一些，我们在H2中加入补白10PX,
　　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;

上一页 [1] [2] [3] [4] [5] 下一页

上一篇:问题解决:无法载入MYSQL扩展，请检查PHP配置

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

网页制作实例CSS用一张图片实现圆角相关文章：

·为什么iexplore.exe在打开网页时CPU使用会100%？

·DIV CSS网页布局实例：十步学会用CSS建站

·Photoshop十余种漂亮照片边框简单制作技巧

·教你如何制作QQ空间FLASH导航条

·如何实现局域网打印机共享

·Photoshop实例：制作超酷影片画面场景

网页制作实例CSS用一张图片实现圆角相关软件：

·暗黑破坏神 2：毁灭之王 1.10S极品属性装备制作器

·家常菜制作集锦(1)

·Dreamweaver 网页设计

·家常菜制作集锦(2)

·启动光盘制作完全手册（菜鸟先飞图文教材系列）

·中文版Excel 2003实例与技巧

·多种dos启动盘制作全攻略

·photoshop cs 超梦幻网页创意宝典

·Flash MX 动画制作实例教程

·周恩来总理经典图片集

特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转载的文章有版权问题请联系编辑人员，我们尽快予以更正。
[打印本页] [关闭窗口] 转载请注明来源：http://www.vipcn.net

	\| 帮助(？) \| 版权声明 \| 友情连接 \| 关于我们 \| 信息发布
Copyright 2007 www.vipcn.net All Rights Reserved.	鄂ICP备05000083号Powered by:viphot