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

来源：互联网发布：部落冲突女武神数据编辑：程序博客网时间：2024/04/30 15:32

<!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

阅读全文

0 0