css實現的彎彎的月亮效果程式碼例項
分享一段程式碼例項,它實現了彎彎的月亮效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> #box{ margin:20px auto; height:300px; width:300px; background-color:black; position:relative; overflow:hidden; } #box .a { width:150px; height:150px; border-radius:150px; background-color:white; position:absolute; top:0px; left:0px; } #box .b { width:150px; height:150px; border-radius:150px; background-color:black; position:absolute; left:40px; } </style> </head> <body> <div id="box"> <div class="a"></div> <div class="b"></div> </div> </body> </html>
讓一個圓覆蓋另一個圓的一部分,就形成了一個月牙的形狀。
相關閱讀:
(1).position可以參閱css position一章節。
(2).border-radius可以參閱CSS3 border-radius一章節。
相關文章
- CSS 彎彎的月亮效果CSS
- css3實現的折角效果程式碼例項CSSS3
- css實現的div垂直居中效果程式碼例項CSS
- CSS實現的柱狀圖效果例項程式碼CSS
- css實現矩形切角效果程式碼例項CSS
- css3實現的打折卡效果程式碼例項CSSS3
- css實現的三列等高效果程式碼例項CSS
- CSS3 實現的鐘表效果程式碼例項CSSS3
- css3實現的毛玻璃效果程式碼例項CSSS3
- css3實現的打字機效果程式碼例項CSSS3
- css3實現的圓角效果程式碼例項CSSS3
- css3實現的氣泡效果程式碼例項CSSS3
- css實現圖片灰度效果程式碼例項CSS
- css3實現的文字下滑出現效果程式碼例項CSSS3
- css實現的網頁三列布局效果程式碼例項CSS網頁
- css3實現的斑馬紋效果程式碼例項CSSS3
- css實現的多行文字垂直居中效果程式碼例項CSS
- CSS3實現的div圓角效果程式碼例項CSSS3
- CSS3實現的div陰影效果程式碼例項CSSS3
- css3實現的旋轉魔方效果程式碼例項CSSS3
- css3實現的動態大白效果程式碼例項CSSS3
- css3實現的文字陰影效果程式碼例項CSSS3
- css3實現的多啦a夢效果程式碼例項CSSS3
- css模擬實現雙擊效果程式碼例項CSS
- CSS實現div層半透明效果程式碼例項CSS
- css實現的三角形效果程式碼例項CSS
- jQuery和css3實現的開關效果程式碼例項jQueryCSSS3
- css3實現的邊框陰影效果程式碼例項CSSS3
- 純CSS實現的二級下拉選單效果程式碼例項CSS
- css3實現的動物頭像效果程式碼例項CSSS3
- css3實現的皮球上下彈動效果程式碼例項CSSS3
- jquery實現的選項卡效果例項程式碼jQuery
- css3程式碼實現的滑鼠懸浮按鈕效果程式碼例項CSSS3
- css實現div全屏水平垂直居中效果程式碼例項CSS
- css切角效果程式碼例項CSS
- css模糊效果程式碼例項CSS
- canvas實現的驗證碼效果程式碼例項Canvas
- 純CSS實現的二級導航選單效果程式碼例項CSS