首页 > html > border > Page Widget - 如何创建阴影玻璃边框

Page Widget - 如何创建阴影玻璃边框

border 【border】
我们想知道如何创建阴影玻璃边框。
代码展示 运行结果 

<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.glass_border {
  margin: 1em;
  height: 10em;
  width: 15em;
  box-shadow: .1em .1em .2em rgba(0, 0, 0, .2);
  border-radius: .3em;
  border: .4em solid rgba(255, 255, 255, .1);
}

.glass_border>div {
  height: 100%;
  background: #f0edcc;
  box-shadow: inset 0 0 1px black;
}
</style>
</head>
<body>
  <div class="glass_border">
    <div></div>
  </div>
</body>
</html>