亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

CSS的一些圓角圖形實例分享

一起CSS   發(fā)布時間：2015-09-28 11:08:43   作者：佚名   我要評論
這篇文章主要介紹了CSS的一些圓角圖形實例分享,包括帶有3D效果的CSS圓角實現(xiàn),需要的朋友可以參考下

這是比較流行的CSS圓角，制作方法和理解都有困難，但看完這篇文章，就能掌握這種方法。

先看效果：

制作方法

為了更好的理解，先用簡單的代碼為例。

XHTML代碼：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <b class="top">  
  2. <b class="b1"></b>  
  3. <b class="b2"></b>  
  4. <b class="b3"></b>  
  5. <b class="b4"></b>  
  6. </b>  

CSS代碼：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. b{   
  2. display:block;   
  3. }   
  4. .b1,.b2,.b3,.b4{   
  5. overflow:hidden;   
  6. height:1px;   
  7. border-left:1px solid #000;   
  8. border-right:1px solid #000;   
  9. }   
  10. .b1{   
  11. margin:0 5px;   
  12. background:#000;   
  13. }   
  14. .b2{   
  15. margin:0 3px;   
  16. border-width:0 2px;   
  17. }   
  18. .b3{   
  19. margin:0 2px;   
  20. }   
  21. .b4{   
  22. height:2px;   
  23. margin:0 1px;   
  24. }  

這段代碼效果如下圖：

.top 是一個容器，.b1 是圓角頂部的橫線，.b2 .b3 .b4 分別是設(shè)置遞減的左右 margin 和相應(yīng)的 border ，他們便組成了圓角圓弧中的幾個點。合在一起，就組成了上半部分的圓角。看下面的動態(tài)圖就能很好的理解了。

為了看的更清楚，圖中用了較粗的“線”和“點”，看起來鋸齒比較明顯，而網(wǎng)頁上設(shè)置的 1px、2px 就不容易看出鋸齒了。

下半部分和上半部分的原理是一樣的，只是“倒”過來了。

完整的代碼

XTHML代碼：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div id="box"><!--容器-->  
  2. <b class="top"><!--上半部分圓角-->  
  3. <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>  
  4. </b>  
  5. <div id="content">內(nèi)容區(qū)</div>  
  6.   
  7. <b class="bottom"><!--下半部分圓角-->  
  8. <b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>  
  9. </b>  
  10. </div>  

CSS代碼：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. b{   
  2. display:block;   
  3. }   
  4. .b1,.b2,.b3,.b4{   
  5. overflow:hidden;   
  6. height:1px;   
  7. border-left:1px solid #000;   
  8. border-right:1px solid #000;   
  9. }   
  10. .b1{   
  11. margin:0 5px;   
  12. background:#000;   
  13. }   
  14. .b2{   
  15. margin:0 3px;   
  16. border-width:0 2px;   
  17. }   
  18. .b3{   
  19. margin:0 2px;   
  20. }   
  21. .b4{   
  22. height:2px;   
  23. margin:0 1px;   
  24. }   
  25. #content{   
  26. border:solid #000;   
  27. border-width:0 1px;   
  28. }  

3D效果CSS圓角

先看效果吧：

下面給出相應(yīng)的代碼。

XHTML代碼：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="box">  
  2. <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>  
  3. <div class="content">  
  4. <h1>3D效果CSS圓角</h1>  
  5. </div>  
  6. <b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b>  
  7. </div>  

CSS代碼：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. *{   
  2. margin:0;   
  3. padding:0;   
  4. }   
  5. .box{   
  6. width:400px;   
  7. margin:20px auto;   
  8. }   
  9. h1{   
  10. font-size:2em;   
  11. color:#fff;   
  12. padding:20px;   
  13. text-align:center;   
  14. }   
  15. b{   
  16. display:block;   
  17. overflow:hidden;   
  18. height:1px;   
  19. background:#96C2F1;   
  20. border-width:0 1px;   
  21. border-style:solid;   
  22. }   
  23. .b1{   
  24. margin:0 5px;   
  25. background:#fff;   
  26. border:none;   
  27. }   
  28. .b2{   
  29. border-right:#eee;   
  30. }   
  31. .b3{   
  32. border-right:#ddd;   
  33. }   
  34. .b4{   
  35. border-right:#aaa;   
  36. }   
  37. .b4b{   
  38. border-left:#eee;   
  39. }   
  40. .b3b{   
  41. border-left:#ddd;   
  42. }   
  43. .b2b{   
  44. border-left:#aaa;   
  45. }   
  46. .b2,.b3,.b4{   
  47. border-left-color:#fff;   
  48. }   
  49. .b4b,.b3b,.b2b{   
  50. border-right-color:#999;   
  51. }   
  52. .b2,.b2b{   
  53. margin:0 3px;   
  54. border-width:0 2px;   
  55. }   
  56. .b3,.b3b{   
  57. margin:0 2px;   
  58. }   
  59. .b4,.b4b{   
  60. height:2px; margin:0 1px;   
  61. }   
  62. .b1b{   
  63. margin:0 5px;   
  64. background:#999;   
  65. border:none;   
  66. }   
  67. .content{   
  68. background:#96C2F1;   
  69. border-left:1px solid #fff;   
  70. border-right:1px solid #999;   
  71. }  

相關(guān)文章

  • CSS3制作圓角圖片和橢圓形圖片

    這篇文章主要教大家CSS3制作圓角圖片和橢圓形圖片的具體實現(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2016-07-08

  • Css3圓角邊框制作代碼

    本篇文章給大家介紹基于css3來實現(xiàn)邊框圓角效果，實現(xiàn)此效果當然border-radius要在firefox或Safari 和 Chrome才能實現(xiàn)哦。對css3圓角邊框制作代碼感興趣的朋友參考下吧
    2015-11-18

  • CSS3繪制圓角矩形的簡單示例

    這篇文章主要介紹了CSS3繪制圓角矩形的簡單示例,注意一下各瀏覽器對CSS3的兼容性,需要的朋友可以參考下
    2015-09-28

  • 使用css實現(xiàn)圓角圖形繪制

    這篇文章主要介紹了使用css實現(xiàn)圓角圖形繪制,文中也提到了相關(guān)的鋸齒問題,需要的朋友可以參考下
    2015-07-22

  • 純CSS實現(xiàn)圓角折疊菜單的方法

    這篇文章主要為大家介紹了純CSS實現(xiàn)圓角折疊菜單的方法,通過多個寬度漸進變化的頁面元素堆加模擬圓角效果,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-05-19

  • CSS實現(xiàn)反方向圓角的示例代碼

    這篇文章主要介紹了CSS實現(xiàn)反方向圓角的示例代碼的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-10-12

最新評論