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

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

前端觀察   發(fā)布時(shí)間：2015-07-22 19:38:20   作者：糖伴西紅柿   我要評(píng)論
這篇文章主要介紹了使用css實(shí)現(xiàn)圓角圖形繪制,文中也提到了相關(guān)的鋸齒問題,需要的朋友可以參考下

查看 demo

html

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="curvedBox">     
  2.     <span>  
  3.         <span class="r1"></span>  
  4.         <span class="r2"></span>  
  5.         <span class="r3"></span>  
  6.         <span class="r4"></span>  
  7.     </span>  
  8.     <div class="content"> Flex is a cross-platform development framework for creating rich Internet applications (RIAs). Flex enables you to create expressive, high-performance applications that run identically on all major browsers and operating systems.    
  9.     </div>  
  10.     <span>  
  11.         <span class="r4"></span>  
  12.         <span class="r3"></span>  
  13.         <span class="r2"></span>  
  14.         <span class="r1"></span>  
  15.     </span>  
  16. </div>    

css

CSS Code復(fù)制內(nèi)容到剪貼板
  1. body{background-color:#000;}     
  2. .curvedBox{   
  3.     width:300px;   
  4.     margin: 2510px auto 0;   
  5. }    
  6. .curvedBox .r1,.curvedBox .r2,.curvedBox .r3,.curvedBox .r4{   
  7.     background-color:#fff;   
  8.     display:block;   
  9.     overflow:hidden;   
  10.     height:1px;   
  11.     font-size:1px;   
  12. }    
  13. .curvedBox .r2,.curvedBox .r3,.curvedBox .r4{   
  14.     border-width:0 1px;   
  15.     border-left:1px solid #fff;   
  16.     border-right:1px solid #fff;   
  17. }    
  18. .curvedBox .r1{margin:0 6px;}    
  19. .curvedBox .r2{margin:0 3px;}    
  20. .curvedBox .r3{margin:0 2px;}    
  21. .curvedBox .r4{   
  22.     margin:0 1px;   
  23.     height:2px;   
  24. }    
  25. .curvedBox .content{   
  26.     background:#fff;   
  27.     border-left:1px solid #fff;   
  28.     border-right:1px solid #fff;   
  29.     padding:0 5px;   
  30. }  

這個(gè)方法其實(shí)并不完美，其實(shí)只是利用了”無限接近”的一個(gè)概念?？捶糯蠛蟮膱D的話，可以很清楚地看到鋸齒狀。

2015722194358720.png (560×341)

其實(shí)把圖片放大足夠地倍數(shù)地話，也能看到鋸齒，不過放大地倍數(shù)得相當(dāng)大了。將 r1 r2 r3 r4 層疊起來，利用它們 margin（left/right） 的改變以及 border(left/right)，來實(shí)現(xiàn)這個(gè)近似的效果。理論上，如果 rn 足夠多的話，效果就會(huì)無限趨近圓弧。不過話又說回來了，多加這么多的標(biāo)簽和css的話，在效率上必然會(huì)存在問題，也說不上就比用圖片好到哪里去。所以說，這只是提供一個(gè)思路，到底怎么用，用在哪里，還得因地制宜。

不過有第一點(diǎn)其實(shí)應(yīng)該注意的 rn{;overflow:hidden;} 這是解決 ie 下1像素高容器的方法，ie 下當(dāng)容器高度低于某些值時(shí)(如10px)，即使指定
height:1px; 得到的表現(xiàn)都會(huì)遠(yuǎn)高于1px，而 overflow:hidden; 是一個(gè)很好的解決方法。

相關(guān)文章

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

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

  • Css3圓角邊框制作代碼

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

  • CSS的一些圓角圖形實(shí)例分享

    這篇文章主要介紹了CSS的一些圓角圖形實(shí)例分享,包括帶有3D效果的CSS圓角實(shí)現(xiàn),需要的朋友可以參考下
    2015-09-28

  • CSS3繪制圓角矩形的簡(jiǎn)單示例

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

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

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

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

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

最新評(píng)論