zoukankan html css js c++ java

css从中挖去一个圆

始终居中：

             300px;
            position: fixed;

/*在可视区域的上下左右居中*/

 top: calc(50vh - 200px); 
 left: calc(50vw - 150px);

二分之一圆的边：

            border: 1px solid #fff;
            position: absolute;
             30px;
            height: 60px;
            border- 1px 0px 1px 1px;
            border-radius: 30px 0 0 30px;
            top: calc(50% - 30px);
            right: 0;

完整：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3 Calc</title>
    <style type="text/css" media="screen">
        body{
            background-image: url('../js-test/1.jpg');background-repeat: no-repeat;
        }
        .square, .square > div { box-sizing: border-box; }
        .square {
            width: 300px;
            position: fixed;
            top: calc(50vh - 200px);
            left: calc(50vw - 150px);
            overflow: hidden;
        }
        .square > .s-top {
            border: 1px solid #fff;
            height: 170px;
            border-radius: 5px 5px 0 0;
            border-width: 1px 1px 0 1px;
        }
        .square > .s-middle {
            border-left: 1px solid #fff;
            height: 60px;
        }
        .square > .s-bottom {
            border: 1px solid #fff;
            height: 170px;
            border-radius: 0 0 5px 5px;
            border-width: 0px 1px 1px 1px;
        }

        .square > .s-half-circle {
            border: 1px solid #fff;
            position: absolute;
            width: 30px;
            height: 60px;
            border-width: 1px 0px 1px 1px;
            border-radius: 30px 0 0 30px;
            top: calc(50% - 30px);
            right: 0;
        }
        .square > .s-background {
            border: 360px solid rgba(255,255,255,0.3);
            position: absolute;
            width: 780px;
            height: 780px;
            border-radius: 50%;
            top: calc(50% - 390px);
            right: -390px;
        }
        .circle {
            width: 50px;
            height: 50px;
            border: 1px solid #fff;
            border-radius: 50%;
            position: absolute;
            top: calc(50% - 25px);
            left: calc(50% + 125px);
            background-color: rgba(255,255,255,.3);
            box-sizing: border-box;
        }

    </style>
</head>

<body>
<div class="square">
    <div class="s-top"></div>
    <div class="s-middle"></div>
    <div class="s-bottom"></div>
    <div class="s-half-circle"></div>
    <div class="s-background"></div>
</div>
<div class="circle"></div>
</body>
</html>

查看全文

相关阅读:
parse_str() 函数把查询字符串解析到变量中。
ThinkPHP函数详解：L方法
 ThinkPHP函数详解：F方法
 PHP defined() 函数
 Ajax beforeSend和complete 方法
 mdb文件怎么打开
 网盘资料
 win7下IIS的安装和配置
 perl5 第十一章文件系统
 perl5 第十章格式化输出

原文地址：https://www.cnblogs.com/wang715100018066/p/6293142.html