<!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.png