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>

相关阅读:
Anaconda下载及安装教程
 机器学习之一元线性回归模型
 PyCharm下载及安装教程
 Python基础之数据类型、变量、常量
 新旧代码的兼容（c和c++）
埃拉托斯特尼--筛法 c++求质数，用bitset类型
 使用预处理器进行调试
 刷题-网易2018实习生招聘笔试题
 深度优先搜索-DFS遍历图-C++
图--邻接矩阵c++
原文地址：https://www.cnblogs.com/wang715100018066/p/6293142.html