CSS Layout How to - Create Inset box-shadow on top and bottom only

Question

We would like to know how to create Inset box-shadow on top and bottom only.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#inset-shadow-bar {<!--from  w w  w .  j av  a  2  s  . co  m-->
  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>

The code above is rendered as follows: