淘宝灵活的圆角框--通过一个圆形图片形成圆角原理
2011-06-01 01:37
513 查看
具体实现方案就是通过隐藏/显示一个圆形的不同部分来实现圆角效果,具体分析见注释!!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>淘宝-1图像圆角框</title> <!--这里利用的只显示圆形图像的部分来达到圆形的效果--> <style type="text/css"> * { margin:0; padding:0; } body { font:20px Verdana, Geneva, sans-serif; padding:10px; } .main { width:600px; margin:0 auto; } .main, .main .hd, .main .ft, .main em { background:url(main_panel_corners.gif) no-repeat 0 0; /*首先main中的图像是完全显示的,因为其内容高度大于图像高度,1/4部分被.hd span 中的白色盖住,1/2被bd中的白色盖住*/ } .main .hd { background:url(main_panel_corners.gif) no-repeat right top; padding:0 5px; /*这样的话,.hd span 的宽度就正好是hd-5-5(圆的半径),通过设置span的背景颜色,正好将圆的1/4部分遮住,形成圆角,注意此时hd中的圆形背景只显示1/2(上半部分,因为其高度是通过(span中的padding-top设置的为5px,所以只能显示上半部分)*/ } .main .hd span { padding-top:5px; background:white; border-top:1px solid #a9cfff; display:block; } .main .ft { background:url(main_panel_corners.gif) no-repeat bottom left; } .main .ft em { background:url(main_panel_corners.gif) no-repeat bottom right; padding:0 5px; display:block; } .main em span { padding-top:5px; background:white; border-bottom:1px solid #a9cfff; display:block; } .main .bd { /*不能设置上边距,因为这样的话就不能够完全遮挡.main 背景图片的1/2部分了*/ border:1px solid #a9cfff; border-width:0 1px; background:white; padding:10px; } h1 {padding:10px 20px;} p {line-height:140%;text-indent:2em;} </style> </head> <body> <div class="main"> <div class="hd"><span></span></div> <div class="bd"> <h1>Mozilla Firefox</h1> <p>我爱beyond网立志做全国最大的专业纪念beyond网站,www.ilovebeyond.com</p> <p>Internet Explorer is Microsoft's new version of the Windows operating system as an integral part. In an earlier version of the operating system, it is an independent, free of charge. Windows 95 OSR2 from the beginning, it was all tied up as a new version of the Windows operating system in the default browser. However, the recent (2004 ~ 2005), a major update applies only to Windows XP SP2 and Windows Server 2003 SP1. Initially, Microsoft plans and the next version of the Windows operating system release Internet Explorer 7, but Microsoft recently announced that, Internet Explorer 7 in a test version (Beta 1) in the summer of 2005 will be made available to Windows XP SP2 users. In the second half of 2006 released Windows Vista will be bundled with the official version of Internet Explorer 7.0. 2008 on 5 years 3 release of Internet Explorer 8 Beta1.</p> <p>As the first by bundling Windows and gain market share and growing out of major security hole, the implementation of its own inefficient and does not support W3C standards, Internet Explorer has been criticized, but had to admit it for the development of the Internet has contributed to .</p> <p> Referred to as IE or MSIE, Microsoft launched a web browser. Internet Explorer is the most widely used Web browser, although since 2004 it has lost some market share. In April 2005, it has a market share of about 85%.</p> </div> <div class="ft"><em><span></span></em></div> </div> </body> </html>
相关文章推荐
- Android学习研究(四)通过PorterDuffXfermode形成简单的圆角和圆形图片
- Android通过播放多张图片形成一个动画 分类: Android 2015-04-24 14:05 16人阅读 评论(0) 收藏
- Android通过播放多张图片形成一个动画
- 在《Android PorterDuff.Mode图形混合处理 》这篇博客中,我们讲解了PorterDuff.Mode对图形混合的处理。这篇我们将通过图形混合的原理,来制作一个手动擦除蒙版显示底层图片
- 一个裁剪图片的小工具类,通过一句代码调用
- Android Xfermode 实战 实现圆形、圆角图片
- 让一个小图片重复出现,形成一张大图片
- Android自定义ImageView实现图片圆形 ,椭圆和矩形圆角显示
- 用CSS3的圆角border-radius属性,画一个圆形
- glide实现圆角和圆形图片
- 圆角,倒影,圆形图片,截图,获取图片资源
- Picasso实现下载圆形头像以及圆角图片
- 2018.01.28.圆形图片、圆角矩形图片、scoped属性
- Android播放多张图片形成的一个动画示例
- 使用Glide对网络图片进行圆形和圆角的处理
- 创建圆形头像和圆角图片
- 纯css无图片的边框圆角实现原理
- 微软做了一个“绘画机器人”,可以通过文字生成图片
- Android BitmapShader 实战 实现圆形、圆角图片
- Android使用BitmapShader图形渲染实现圆形、圆角和椭圆自定义图片View