答：其关键时使用
background-clip
属性
background-clip
默认为border-box，即元素背景会延伸到边框下，此时设置半透明边框，显示的是元素自身的背景
将其设置为
padding-box
或者
content-box
后，元素自身的背景不会延伸到边框下，此时半透明边框显示的是父级元素的背景
看下面动图效果，一目了然
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>半透明边框</title>
</head>
<style>
body {
background-color: saddlebrown;
div {
margin: 20px;
height: 200px;
border: 10px solid rgba(255, 255, 255, 0.3);
background-color: white;
background-clip: padding-box;
</style>
<div>我有一个半透明边框</div>
</body>
</html>
