雖然css3的border-radius實現圓角很簡單，但是我還是認為css2.1中好多技術還是很值得學習的，我也是后來才知道這就是傳說中的滑動門技術。腦洞大開啊
附上demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /* 水平固定，垂直可拉伸圓角，核心設置大盒子固定寬度，並給大盒子一個底部背景。給標題一個頂部背景，高度由段落撐開，通過設置標題和段落的內邊距達到需要的樣式 */ .box{ width: 418px; background: teal url('img/bottom.gif') no-repeat bottom left; } .box h3{ background: teal url('img/top.gif') no-repeat top left; padding: 20px 20px 0 20px; } .box p{ padding: 0 20px 10px 20px; } /* 大盒子設置了固定框度，標題有一個頂部背景，段落有一個底部背景，中間的有一個平鋪背景，這樣就能實現帶有漸變效果的邊框 */ .box2{ width: 424px; background: url('img/tile2.gif') repeat-y; /* background: #f3f3f3; */ } .box2 h3{ background: url('img/top2.gif') no-repeat top left; padding: 20px 20px 0 20px; } .box2 .p2{ background: url('img/bottom2.gif') no-repeat bottom left; padding: 0 20px 10px 20px; } /* 滑動門技術，四個圖片，四個div:左下圓角大背景 ，右下圓角大背景，左上圓角小背景，右上圓角超小背景，小背景壓在大背景的上面，順序很重要*/ .box3 { width: 30em; /* 左下圓角大背景 */ background: url('img/bottom-left.gif') no-repeat bottom left ; } .box3 .outer { /* 右下圓角大背景 */ background: url('img/bottom-right.gif') no-repeat bottom right; } .box3 .inner { /* 左上圓角小背景 */ background: url('img/top-left.gif') no-repeat top left; } .box3 h3 { /* 右上圓角超小背景 */ background: url('img/top-right.gif') no-repeat top right; padding: 20px 20px 0 20px; } .box3 p { padding: 0 20px 10px 20px; } /* 多圖背景順序：右上，左上，右下，左下 */ .box4 { width: 15em; background-image: url('img/top-right.gif'), url('img/top-left.gif'), url('img/bottom-right.gif'), url('img/bottom-left.gif'); background-repeat: no-repeat, no-repeat, no-repeat, no-repeat; background-position: top right, top left, bottom right, bottom left; } .box4 h3{ padding: 20px 20px 0 20px; } .box4 p{ padding: 0 20px 10px 20px; } </style> </head> <body> <div class="box"> <h3>這是一個標題</h3> <p>這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落</p> </div> <div class="box2"> <h3>這是一個標題</h3> <p class="p2">這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落</p> </div> <div class="box3"> <div class="outer"> <div class="inner"> <h3>這是一個標題</h3> <p class="p3">這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落</p> </div> </div> </div> <!-- 利用css3實現的滑動門 --> <div class="box4"> <h3>這是一個標題</h3> <p class="p4">這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落</p> </div> </body> </html>
我覺得我寫的注釋只有我自己能看懂，哈哈哈哈，這個案例的圖片設計的很有技巧，一般人真想不到，可通過審查元查看圖片的樣子，演示地址：http://down.yesyes.wang/book/04/radius.html