淘宝店铺装修CSS3动态边框代码

效果图如下： ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓










不说了，你们自己看吧，直接放代码。 只提供主体，切勿直接复制到自己的店铺里。

1. <style>
   
2. 
   
3. 
   
4. .xbz-red-line-frame{
   
5. 
   
6. width:500px;
   
7. 
   
8. height:500px;
   
9. 
   
10. background:#FFFF33;
    
11. 
    
12. margin-top:200px;
    
13. 
    
14. margin-left:200px;
    
15. 
    
16. }
    
17. 
    
18. 
    
19. .xbz-red-line-left,.xbz-red-line-right{width:2px; height:0px;transition:all 0.5s; background:#FF0000;position:absolute;}
    
20. 
    
21. .xbz-red-line-top,.xbz-red-line-bottom{width:0px; height:2px;transition:all 0.5s; background:#FF0000;position:absolute;}
    
22. 
    
23. 
    
24. .xbz-red-line-frame:hover .xbz-red-line-left{ height:100%;}
    
25. 
    
26. .xbz-red-line-frame:hover .xbz-red-line-right{ height:100%;}
    
27. 
    
28. .xbz-red-line-frame:hover .xbz-red-line-top{ width:100%;}
    
29. 
    
30. .xbz-red-line-frame:hover .xbz-red-line-bottom{ width:100%;}
    
31. 
    
32. 
    
33. </style>
    
34. 
    
35. 
    
36. <div style="width:900px; height:900px; background:#CCCCCC; position:absolute;">
    
37. 
    
38.   <div class="xbz-red-line-frame" style="position:relative; border-radius:; box-shadow:8px 8px 8px #888;">
    
39. 
    
40.       <a href="#"><img src="http://img03.taobaocdn.com/imgextra/i3/2049295175/TB2H_KrbXXXXXbGXXXXXXXXXXXX_!!2049295175.jpg" width="450" height="450" style="margin:20px 10px; border-radius:450px; box-shadow:10px 10px 50px #ccc;"/></a>
    
41. 
    
42.       <div class="xbz-red-line-left" style="top:0; left:0;"></div>
    
43. 
    
44.       <div class="xbz-red-line-right" style="right:0; bottom:0;"></div>
    
45. 
    
46.       <div class="xbz-red-line-top" style="top:0; left:0;"></div>
    
47. 
    
48.       <div class="xbz-red-line-bottom" style="right:0; bottom:0;"></div>
    
49. 
    
50.   </div>
    
51. 
    
52. </div>
    
53. 
    
54. 
    
55. 
    
56. <!--此部分代码复制到记事本中保存后修改文件后缀为html可以直观看到效果-->
    
57. 
    
58. 
    
59. <!--不带hover属性类（.xbz-red-line-frame||.xbz-red-line-left||.xbz-red-line-right||.xbz-red-line-top||.xbz-red-line-bottom）的样式可以写到行内 节省空间 特别要注意的是absolute属性需要转换 淘宝是不允许用绝对定位的-->
    
60. 
    
61. 
    
62. <!--测试写的CSS3属性比较简单，因为使用360浏览器测试 如果需要更佳的兼容性建议补全transition属性
    
63. 
    
64. 
    
65. transition:all 0.5s;
    
66. 
    
67. -ms-transition:all 0.5s; /* IE 9 */
    
68. 
    
69. -moz-transition:all 0.5s; /* Firefox */
    
70. 
    
71. -webkit-transition:all 0.5s; /* Safari and Chrome */
    
72. 
    
73. -o-transition:all 0.5s; /* Opera */
    
74. 
    
75. 
    
76. -->
    
77. 
    
78. 
    
79. <!--题外话----这里只给出了一个，但是...但是你要知道“举一反∞”【至于布局和图片，才是考验你美术功底的要点】 另外，写代码一定要养成良好的布局习惯（该注释的要注释）,有层次感放能“临危不晕”-->
    

复制代码