css 实现内凹圆角

1年前 
<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body {
            background: cyan;
            /* 圆角半径 */
            --radiusWidth: 18px;
            /*盒子宽度*/
            --box-width: 300px;
        }
        #app {
            width: var(--box-width);
            height: 200px;
            margin: 100px auto;
            position: relative;
            overflow: hidden;

        }
        #app > div {
            position: relative;
            width: 100%;
            height: 50%;
            overflow: hidden;
        }
        #app > div > span {
            position: relative;
            z-index: 200;
            display: block;
            /* 内容两边不要超过圆角 */
            width: calc(var(--box-width) - var(--radiusWidth) * 2);
            margin: 0 auto;
            height: 100%;
        }

        #app .top::after,
        #app .bottom::after,
        #app .top::before,
        #app .bottom::before {
            position: absolute;
            width: calc(var(--radiusWidth) * 2);
            height: calc(var(--radiusWidth) * 2);
            border-radius: 50%;
            z-index: 10;
            content: '';
        }

        #app .top::after, #app .top::before {
            bottom: calc(var(--radiusWidth) * -1);
            box-shadow: 1px 0px 7px 250px RGBA(247, 140, 108, 1.00);
        }
        #app .bottom::after, #app .bottom::before {
            top: calc(var(--radiusWidth) * -1);
            box-shadow: 1px 0px 7px 250px #aaa;
        }

        #app .top::after {
            left: calc(var(--radiusWidth) * -1);
        }
        #app .top::before {
            right: calc(var(--radiusWidth) * -1);
        }
        #app .bottom::after {
            left: calc(var(--radiusWidth) * -1);
        }
        #app .bottom::before {
            right: calc(var(--radiusWidth) * -1);
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="top">
            <!-- 内容 -->
            <span>123</span>
        </div>
        <div class="bottom">
            <!-- 内容 -->
            <span>456</span>
        </div>
    </div>
</body>
</html>

预览 屏幕快照 2018-12-19 22.40.27.pngfile