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>

相关阅读:
linux学习笔记31--命令route和routetrace
你大概走了假敏捷：认真说说敏捷的实现和问题【转】
如何管理好自己的测试团队【转】
Linux 服务器配置JDK
替换jar包内指定的文件
Jenkins maven仓库地址和手动修改maven 版本
逻辑英语第四季 Speaking and Listening
Linux下，部署多个Tomcat
逻辑英语第三季
Jmeter+Ant+Jenkins接口自动化测试框架搭建

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