用calc()繪製手機圖案解鎖的九宮格樣式

時間 2019-11-25

標籤 calc 繪製手機圖案解鎖九宮樣式简体版

原文原文鏈接

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>九宮格</title> </head> <style> .squre{ width: 600px; height:600px; border:2px dotted #0f0; color:#aaaaaa; font-size: 28px; font-weight: bold; } .circle{ width: calc(100%/3 - 8px); -moz-width: calc(100%/3 - 8px); -webkit-width: calc(100%/3 - 8px); height: calc(100%/3 - 8px); -moz-height: calc(100%/3 - 8px); -webkit-height: calc(100%/3 - 8px); line-height: calc(600px/3 - 8px); -moz-line-height: calc(600px/3 - 8px); -webkit-line-height: calc(600px/3 - 8px); text-align:center; border-radius: 50%; margin:0 calc(8px*3/2) calc(8px*3/2) 0; -moz-margin:0 calc(8px*3/2) calc(8px*3/2) 0; -webkit-margin:0 calc(8px*3/2) calc(8px*3/2) 0; float:left; background:rgba(0,0,0,0.1); } .circle:nth-child(3n){ margin-right:0; } </style> <body> <div class="squre"> <div class="circle">1</div> <div class="circle">2</div> <div class="circle">3</div> <div class="circle">4</div> <div class="circle">5</div> <div class="circle">6</div> <div class="circle">7</div> <div class="circle">8</div> <div class="circle">9</div> </div> </body> </html>

九宮格效果圖：css

在繪製過程當中主要用到的是css中的calc()，下面針對calc()作一下簡單介紹：html

calc()
1.支持%、rem、em、px等單位的四則運算
2.「+」、「-」運算注意要留有空格
3.「*」、「/」運算能夠不留空格

兼容性處理:
-moz-calc(expression) 兼容firefox
-webkit-calc(expression) 兼容chrome/safariweb

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。