用calc()绘制手机图案解锁的九宫格样式
生活随笔
收集整理的這篇文章主要介紹了
用calc()绘制手机图案解锁的九宫格样式
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
<!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中的calc()，下面針對calc()做一下簡單介紹：
calc()
1.支持%、rem、em、px等單位的四則運算
2.“+”、“-”運算注意要留有空格
3.“*”、“/”運算可以不留空格
兼容性處理:
-moz-calc(expression) ? ? 兼容firefox
-webkit-calc(expression) ? 兼容chrome/safari
總結(jié)
以上是生活随笔為你收集整理的用calc()绘制手机图案解锁的九宫格样式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 这才叫酷！戴上这些装备喝酒你就是酒仙了(
- 下一篇： 使用打码平台登录B站