淘宝灵活的圆角框--通过一个圆形图片形成圆角原理
生活随笔
收集整理的這篇文章主要介紹了
淘宝灵活的圆角框--通过一个圆形图片形成圆角原理
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
具體實現方案就是通過隱藏/顯示一個圓形的不同部分來實現圓角效果，具體分析見注釋！！ <!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>
轉載于:https://www.cnblogs.com/beyond1990/archive/2011/06/01/2065319.html
總結
以上是生活随笔為你收集整理的淘宝灵活的圆角框--通过一个圆形图片形成圆角原理的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ORA-32004问题解决
- 下一篇： jwplayer 消除logo