用calc()绘制手机图案解锁的九宫格样式

时间：2021-07-09 06:51:16
<!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>

九宫格效果图：

 用calc()绘制手机图案解锁的九宫格样式


      在绘制过程中主要用到的是css中的calc()，下面针对calc()做一下简单介绍：

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

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

相关文章