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

最新推荐文章于 2021-05-29 23:17:00 发布

原创

最新推荐文章于 2021-05-29 23:17:00 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #九宫格 #calc

这篇博客介绍了如何利用CSS中的calc()函数来绘制手机图案解锁的九宫格效果。内容涵盖calc()的功能，如支持不同单位的四则运算，以及在不同浏览器中的兼容性处理，如-moz-calc和-webkit-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;