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

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

花洲郎

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

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： css 九宫格 calc

本文链接：https://blog.youkuaiyun.com/SunYu_Web/article/details/76223774

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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