CSS3中怎么繪制一個圓角矩形

CSS3中怎么繪制一個圓角矩形，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

隨著網絡的發展，CSS 也在不斷的完善，充分吸取多年來 Web 發展的需求，提出了很多新穎的 CSS 特性，例如很受歡迎的圓角矩形 border-radius 屬性，但很可惜，此屬性目前沒有得到任何瀏覽器的支持。

對于一些瀏覽器，它們有其私有的圓角屬性。如 FF 的 -moz-border-radius ，Safari 和 Chrome 的 -webkit-border-radius 。效果見下圖：

FF 的圓角

Safari 和 Chrome 的圓角(Safari 和 Chrome 使用的是同一種內核，這里就只附 Chrome 的效果了)

IE 和 Opera 就沒有私有的圓角屬性了，如果有的話，那制作圓角應該就簡單多了，把各自的私有屬性全部寫上，讓各個瀏覽器“對號入座”，就達到了“兼容”的效果。

下面給出一個百度有啊CSS圓角方案的示例：

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

1. <div class="box1">  

2.     <span class="tl"></span><span class="tr"></span>  

3.     <div class="cc">  

4.         <p>圓角一</p>  

5.     </div>  

6.     <span class="bl"></span><span class="br"></span>  

7. </div>  

CSS 代碼：

JavaScript Code復制內容到剪貼板

1. .box1 {   

2.  background:url(images/bg1.gif) repeat-x #1d6cb7;   

3.  margin-top:1em;   

4.  position:relative;   

5.  zoom:1;   

6.  width:778px;   

7. }   

8. .box1 .tl, .box1 .tr, .box1 .bl, .box1 .br {   

9.  width:5px;   

10.  height:5px;   

11.  position:absolute;   

12.  background:url(images/bg3.gif) no-repeat;   

13.  overflow:hidden;   

14. }   

15. .box1 .cc {   

16.  height:40px;   

17.  padding:5px;   

18. }   

19. .box1 .tl {   

20.  left:0;   

21.  top:0;   

22. }   

23. .box1 .tr {   

24.  right:0;   

25.  top:0;   

26.  background-position:0 -5px;   

27. }   

28. .box1 .bl {   

29.  left:0;   

30.  bottom:0;   

31.  background-position:0 -10px;   

32. }   

33. .box1 .br {   

34.  right:0;   

35.  bottom:0;   

36.  background-position:0 -15px;   

37. }  

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。