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