CSS3绘制圆角矩形的简单示例_html/css_WEB-ITnose

WBOY

Release： 2016-06-21 09:04:16

Original

1143 people have browsed it

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

38.