css3鋸齒形邊框效果程式碼例項
本章節分享一段程式碼例項,它利用css3實現了邊框的鋸齒效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> * { padding: 0; margin: 0; } .demo { list-style: none; width: 100%; height: 180px; text-align: center; } .demo li { position: relative; width: 20%; height: 100%; margin-right: 3%; background: #f60; display: inline-block; } .demo li:before, .demo li:after { content: ""; position: absolute; top: -20px; display: block; width: 10px; height: 100%; margin-top: 20px; background-size: 20px 10px; } .demo li:before { left: -10px; background-color: #fff; background-position: 100% 35%; background-image: linear-gradient(-45deg, #f60 25%, transparent 25%, transparent), linear-gradient(-135deg, #f60 25%, transparent 25%, transparent), linear-gradient(-45deg, transparent 75%, #f60 75%), linear-gradient(-135deg, transparent 75%, #f60 75%); } .demo li:after { right: -10px; background-color: #f60; background-position: 100% 15%; background-image: linear-gradient(-45deg, #fff 25%, transparent 25%, transparent), linear-gradient(-135deg, #fff 25%, transparent 25%, transparent), linear-gradient(-45deg, transparent 75%, #fff 75%), linear-gradient(-135deg, transparent 75%, #fff 75%); } </style> </head> <body> <ul class="demo"> <li></li> <li></li> <li></li> </ul> </body> </html>
相關文章
- CSS3郵票鋸齒邊框效果詳解CSSS3
- canvas實現的鋸齒效果程式碼例項Canvas
- CSS3圖片邊框陰影效果程式碼例項CSSS3
- css內邊框效果程式碼例項CSS
- CSS3郵票鋸齒效果CSSS3
- css3實現div邊框陰影效果程式碼例項CSSS3
- css3實現的邊框陰影效果程式碼例項CSSS3
- css六邊形效果程式碼例項CSS
- CSS3心形效果程式碼例項CSSS3
- CSS3梯形效果程式碼例項CSSS3
- css3螞蟻線邊框程式碼例項CSSS3
- css3實現的多重邊框程式碼例項CSSS3
- css3 動態條紋邊框程式碼例項CSSS3
- css3實現平行四邊形程式碼例項CSSS3
- CSS3繪製平行四邊形程式碼例項CSSS3
- CSS3實現的平行四邊形程式碼例項CSSS3
- 文字嵌入邊框程式碼例項
- css多重邊框程式碼例項CSS
- OpenGL 學習 06 多邊形偏移 裁剪 混合 抗鋸齒
- css邊框陰影程式碼例項CSS
- css半透明邊框程式碼例項CSS
- css條紋邊框程式碼例項CSS
- div虛線邊框程式碼例項
- css3邊框顏色漸變且四角有內凹圓形程式碼例項CSSS3
- css 心形效果程式碼例項CSS
- css3星空效果程式碼例項CSSS3
- css3水滴效果程式碼例項CSSS3
- CSS3 名片效果程式碼例項CSSS3
- css3橢圓形程式碼例項CSSS3
- CSS3小黃人效果程式碼例項CSSS3
- css3晃動效果程式碼例項CSSS3
- CSS3旋轉效果程式碼例項CSSS3
- CSS3彈球效果程式碼例項CSSS3
- 密碼框提示文字效果程式碼例項密碼
- 密碼框輸入提示效果程式碼例項密碼
- 當前文字框高亮效果程式碼例項
- div css搜尋框效果程式碼例項CSS
- input文字框圓角效果程式碼例項