console 命令行工具 X clear
console
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>镂空测试</title>
	<style>
		body {
			height: 100%;
			width: 100%;
			background: url('http://placekitten.com/g/1920/1080');
            background-repeat: no-repeat;
			background-size: cover;
		}

		.outer {
			width: 660px;
			height: 400px;
			background: transparent;
			overflow: hidden;
            position: relative;
		}

		.inner1 {
			position: absolute;
			left: 295px;
			top: 90px;
			width: 100px;
			height: 100px;
			border-radius: 100px;
			box-shadow: rgba(255, 255, 255, 1) 0 0 0 20px;
			z-index: 100;
		}

		.inner2 {
			position: absolute;
			left: 485px;
			top: 130px;
			width: 100px;
			height: 100px;
			border-radius: 100px;
			box-shadow: rgba(255, 255, 255, 1) 0 0 0 20px;
			z-index: 100;
		}
	</style>
</head>

<body>
	<div class="outer" id="bgBox">
		<div class="inner inner1"></div>
		<div class="inner inner2"></div>
	</div>
    <a class="source-code" href="https://jsrun.net/dK9Kp/edit">查看源码</a>

    <script>
        var inners = document.querySelectorAll(".inner")
        inners[0].style.boxShadow = "blue 0 0 0 20px"
    </script>
</body>

</html>