前端开发CSS原生变量和计算

android前端开发教程
2015传智播客web前端开发视频教程
web前端开发 视频教程
<!DOCTYPE html>
    <head>
        <meta charset=”utf-8″ />
        <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />
        <title>Examples</title>
        <meta name=”description” content=”” />
        <meta name=”keywords” content=”” />
        <link href=”” rel=”stylesheet” />
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            body {
                position: relative;
                width: 100vw;
                height: 100vh;
            }
            html {
                –w: 30vw;
                –h: 30vw;
                –borderW: 2px;
                –colorRed: red;
            }
            .box {
                position: absolute;
                left: calc(100% / 2);
                top: calc(100% / 2);
                margin-top: calc(var(–w) / -2);
                margin-left: calc(var(–h) / -2);
                width: var(–w);
                height: var(–h);
                border: var(–borderW) inset var(–colorRed);
            }
        </style>
    </head>
    <body>
        <div class=”box”></div>
    </body>
</html>
web前端开发教程 网盘
菜鸟教程网前端开发
编程前端开发视频教程下载
» 本文来自:前端开发者 » 《前端开发CSS原生变量和计算》
» 本文链接地址:https://www.rokub.com/7759.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!