用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中的calc()，下面针对calc()做一下简单介绍：

calc()
1.支持%、rem、em、px等单位的四则运算
2.“+”、“-”运算注意要留有空格
3.“*”、“/”运算可以不留空格

兼容性处理:
-moz-calc(expression)     兼容firefox
-webkit-calc(expression)   兼容chrome/safari

 

posted @ 2017-07-28 09:00  Sun·傲宇  阅读(242)  评论(0)  编辑  收藏  举报