CSS條紋背景程式碼例項
分享一段程式碼例項,它實現了條紋背景效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> .box { width: 200px; height: 200px; float: left; padding: 10px; margin: 10px 20px; color: #333; text-align: center; font-size: 16px; font-weight: bold; } .linearGradient { background: linear-gradient(#fb3 50%, #58a 0); background-size: 100% 30px; } .linearGradient2 { background: linear-gradient(to right, #fb3 50%, #58a 0); /* to right == 90deg */ background-size: 30px 100%; } .linearGradient3 { background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0); background-size: 30px 30px; } .linearGradient4 { background: repeating-linear-gradient(60deg, #fb3, #fb3 15px, #58a 0, #58a 30px) } </style> </head> <body> <div class="box linearGradient">水平條紋</div> <div class="box linearGradient2">垂直條紋</div> <div class="box linearGradient3">斜向條紋</div> <div class="box linearGradient4">60度斜向條紋</div> </body> </html>
上面的程式碼實現了我們的要求,更多內容可以參閱相關閱讀。
相關閱讀:
(1).linear-gradient參閱CSS3 linear-gradient線性漸變一章節。
(2).background-size參閱background-size 用法詳解一章節。
相關文章
- css條紋邊框程式碼例項CSS
- css3 動態條紋邊框程式碼例項CSSS3
- css背景虛化效果程式碼例項CSS
- CSS3發光背景程式碼例項CSSS3
- CSS3背景漸變效果程式碼例項CSSS3
- css隱藏滾動條程式碼例項CSS
- css3動態背景圖片程式碼例項CSSS3
- css設定背景圖片樣式程式碼例項CSS
- css背景透明其上文字不透明程式碼例項CSS
- css3實現的斑馬紋效果程式碼例項CSSS3
- css梯形程式碼例項CSS
- css實現的背景透明文字不透明例項程式碼CSS
- CSS滑鼠經過連結切換背景圖片例項程式碼CSS
- css3實現的進度條程式碼例項CSSS3
- css 利用 linear-gradient 實現條紋背景CSS
- css切角效果程式碼例項CSS
- CSS 對聯程式碼例項CSS
- css分割線程式碼例項CSS線程
- css模糊效果程式碼例項CSS
- CSS RGBA 程式碼例項CSS
- css3自定義滾動條樣式程式碼例項CSSS3
- 表格行背景交替變色例項程式碼
- 使用svg作為背景圖程式碼例項SVG
- 導航欄背景切換程式碼例項
- 純css tab選項卡程式碼例項CSS
- CSS 隔行變色程式碼例項CSS
- CSS空心箭頭程式碼例項CSS
- CSS橢圓效果程式碼例項CSS
- css元素位置固定程式碼例項CSS
- css立體效果程式碼例項CSS
- css取消滑鼠事件程式碼例項CSS事件
- css多重邊框程式碼例項CSS
- CSS3雪人程式碼例項CSSS3
- css Sprite 動畫效果程式碼例項CSS動畫
- css斜線效果程式碼例項CSS
- css 心形效果程式碼例項CSS
- css實現梯形程式碼例項CSS
- css細線表格程式碼例項CSS