首页 > html > bottom > CSS Layout - 如何仅在顶部和底部创建Inset框阴影

CSS Layout - 如何仅在顶部和底部创建Inset框阴影

bottom 【bottom】
我们想知道如何仅在顶部和底部创建Inset框阴影。
代码展示 运行结果 

<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#inset-shadow-bar {
  background: #25a7e3;
  height: 200px;
  width: 100%;
  -moz-box-shadow: inset 0 8px 8px -8px #696868, inset 0 -8px 8px -8px
    #696868;
  -webkit-box-shadow: inset 0 8px 8px -8px #696868, inset 0 -8px 8px -8px
    #696868;
  box-shadow: inset 0 8px 8px -8px #696868, inset 0 -8px 8px -8px #696868;
}

body {
  padding: 50px 0;
}
</style>
</head>
<body>
  <div id="inset-shadow-bar"></div>
</body>
</html>