DIV+CSS 斜線效果
DIV+CSS 斜線效果很簡單,只需設定一下CSS Border 的邊框就能有斜線效果。程式碼分享給大家,你可以自己變通。
admin10000.com 提示要注意兩點:1、DIV寬高的定義。2、DIV在 IE6 中預設是有高度的。
上圖右邊是我們要實現的效果,程式碼如下:
<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;
最終程式碼如下:
<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>
相關文章
- css斜線效果程式碼例項CSS
- web 中怎麼實現斜線表頭效果?Web
- Css 斜線生成案例_Css 斜線/對角線整理CSS
- css3實現不斷延長的斜線效果CSSS3
- 純 CSS 實現斜紋效果CSS
- css具有傾斜效果的橫條CSS
- CSS矩形對角斜線CSS
- js 反斜槓\實現折行效果JS
- excel表格斜線怎麼上下打字 表格斜線一分為二怎麼打字Excel
- excel斜線表頭一分為二的方法_excel表格斜線怎麼上下打字Excel
- 如何定製excel單元格的斜線分隔線Excel
- pfile引數中斜線左斜右斜有啥區別和影響麼?請諸位指點一二
- 直播小程式原始碼,Android 傾斜文字 效果設定原始碼Android
- 前端學習路線(2)——Git使用、DIV+CSS佈局前端GitCSS
- div+css排版CSS
- excel斜線表頭的兩種製作方法Excel
- 使用CSS mask 實現圖片的斜線拼接CSS
- DIV+CSS佈局CSS
- iOS開發UI篇--使用UICollectionView實現一個傾斜列表效果iOSUIView
- div+css命名規範CSS
- DIV+css規則整理CSS
- CSS細線表格效果CSS
- CSS 細線表格效果CSS
- AI教程:教你打造麴線效果的字型效果AI
- div+css學習筆記CSS筆記
- div+css佈局注意點CSS
- DIV+CSS規範命名集合CSS
- 用VBA程式碼編寫一鍵插入Excel斜線表頭Excel
- 徹底理解斜槓和反斜槓的區別
- matplotlib 斜體
- 斜邊樣式
- div+css特點與優勢CSS
- 正規表示式將日期字串的中劃線替換為斜槓/字串
- 特殊字元——反斜槓(\)字元
- Java-反斜槓Java
- Hive資料傾斜Hive
- 遊戲中的自動尋路-A*演算法(走斜線篇——帶DEBUG)遊戲演算法
- Flutter 動畫曲線Curves 效果一覽Flutter動畫