DIV+CSS 斜線效果很簡單,只需設置一下CSS Border 的邊框就能有斜線效果。代碼分享給大家,你可以自己變通。
提示要注意兩點:1、DIV寬高的定義。2、DIV在 IE6 中默認是有高度的。
上圖右邊是我們要實現的效果,代碼如下:
1 2 3 4 5 6 7 8 9 10 11 12 | <div id= "box" ></div> <style type= "text/css" > #box{ width : 0px ; height : 0px ; border : 40px solid #000 ; border-top-color : #930 ; border-bottom-color : #0C3 ; border-left-color : #FC0 ; border-right-color : #009 ; } </style> |
在FF IE7 IE8 都顯示正常,但在IE6中,卻如上圖左邊所示,中間有差距,因此,需要加一行:
line-height:0px;
最終代碼如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <div id= "box" ></div> <style type= "text/css" > #box{ width : 0px ; height : 0px ; border : 40px solid #000 ; border-top-color : #930 ; border-bottom-color : #0C3 ; border-left-color : #FC0 ; border-right-color : #009 ; line-height : 0px ; } </style> </head> |
新聞熱點
疑難解答