如何使用css實現圓角圖形繪制

本篇內容介紹了“如何使用css實現圓角圖形繪制”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

html

XML/HTML Code復制內容到剪貼板

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復制內容到剪貼板

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. }  

這個方法其實并不完美，其實只是利用了”無限接近”的一個概念。看放大后的圖的話，可以很清楚地看到鋸齒狀。

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

不過有第一點其實應該注意的 rn{;overflow:hidden;} 這是解決 ie 下1像素高容器的方法，ie 下當容器高度低于某些值時(如10px)，即使指定
height:1px; 得到的表現都會遠高于1px，而 overflow:hidden; 是一個很好的解決方法。

“如何使用css實現圓角圖形繪制”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！