CSS3郵票鋸齒邊框效果詳解
分享一段程式碼例項,它利用CSS3實現了帶有鋸齒邊框的郵票效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> * { margin: 0; padding: 0; } body { background: #B1d202; } .stamp { width: 280px; height: 180px; display: inline-block; padding: 10px; background: white; position: relative; background: radial-gradient(transparent 0px, transparent 4px, white 4px, white); background-size: 20px 20px; background-position: -10px -10px; } .stamp:after { content: ''; position: absolute; left: 5px; top: 5px; right: 5px; bottom: 5px; z-index: -1; } </style> </head> <body> <div class="stamp"> <img src="demo/CSS/img/css3logo.png" /> </div> </body> </html>
上面程式碼實現預期效果,下面介紹一下它的實現過程。
一.程式碼註釋:
[CSS] 純文字檢視 複製程式碼* { margin: 0; padding: 0; }
進行簡單的初始化,將所有元素的內邊距和外邊距設定為0。
[CSS] 純文字檢視 複製程式碼body { background: #B1d202; padding: 100px; text-align: center; }
設定body的背景色、內邊距和對齊方式。
[CSS] 純文字檢視 複製程式碼.stamp { width: 280px; height: 180px; display: inline-block; padding: 10px; background: white; background: radial-gradient(transparent 0px, transparent 4px, white 4px, white); background-size: 20px 20px; background-position: -10px -10px; }
郵票效果的關鍵是,使用徑向漸變作為背景,也就是一個個重複排列的白色圓圈。
有些白色圓圈恰好被div的邊緣給切割開,就形成了鋸齒效果。
二.相關閱讀:
(1).徑向漸變參閱CSS3 radial-gradient()徑向漸變一章節。
(2).background-size參閱CSS3 background-size一章節。
(3).background-position參閱CSS background-position一章節。
相關文章
- CSS3郵票鋸齒效果CSSS3
- css3鋸齒形邊框效果程式碼例項CSSS3
- CSS3多層邊框效果CSSS3
- CSS3邊框動態環繞效果CSSS3
- CSS3環繞動態邊框效果CSSS3
- canvas實現的鋸齒效果程式碼例項Canvas
- css3實現0.5px邊框效果CSSS3
- CSS3實現多樣的邊框效果CSSS3
- CSS3邊框旋轉動畫實現效果CSSS3動畫
- 第5章-著色基礎-5.4-鋸齒和抗鋸齒
- OpenGL 學習 06 多邊形偏移 裁剪 混合 抗鋸齒
- win10圖示鋸齒怎麼消除_win10圖示鋸齒的解決方法Win10
- CSS3屬性-webkit-font-smoothing字型抗鋸齒渲染CSSS3WebKit
- win10顯示器字型鋸齒怎麼辦 win10顯示器字型鋸齒解決方法Win10
- css3實現邊框具有動態環形遮罩效果CSSS3遮罩
- CSS3圖片邊框陰影效果程式碼例項CSSS3
- 使用PorterDuff解決clipPath無法抗鋸齒問題
- css3實現div邊框陰影效果程式碼例項CSSS3
- css3實現的邊框陰影效果程式碼例項CSSS3
- win10瀏覽器字型鋸齒如何恢復 徹底解決win10瀏覽器字型鋸齒方法Win10瀏覽器
- CSS邊框盒子模型詳解CSS模型
- css動態邊框效果CSS
- css3過渡效果詳解CSSS3
- CSS3對勾效果詳解CSSS3
- CSS3邊框與圓角CSSS3
- win10電腦字型鋸齒嚴重的原因_win10字型有鋸齒怎麼辦Win10
- CSS3開關門效果詳解CSSS3
- CSS3動態月食效果詳解CSSS3
- CSS3打字效果詳解CSSS3
- Bitmap拉伸後出現鋸齒的幾種解決辦法
- css3半透明邊框程式碼CSSS3
- CSS圖片邊框陰影效果CSS
- CSS虛線邊框效果程式碼CSS
- css實現的交叉邊框效果CSS
- css實現邊框陰影效果CSS
- CSS3叉號按鈕效果詳解CSSS3
- CSS3 border-radius帶邊框CSSS3
- 13 - CSS3 - 邊框圓角 - 鐘錶CSSS3