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>

查看全文

相关阅读:
1012 最大公约数和最小公倍数问题 2001年NOIP全国联赛普及组
 数论笔记
 Codevs 1200 同余方程 2012年NOIP全国联赛提高组
 Codevs 1213 解的个数(exgcd)
Qbxt 模拟赛&&day-8
NOIP 模拟赛那些年，我们学过的文化课 --致已退役的fqk神犇.
OI路上 day -9
P3178 [HAOI2015]树上操作
 P3979 遥远的国度
 P4092 [HEOI2016/TJOI2016]树

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