App下載
首頁 > html > bottom > CSS Layout - 如何僅在頂部和底部創(chuàng)建Inset框陰影

CSS Layout - 如何僅在頂部和底部創(chuàng)建Inset框陰影

我們想知道如何僅在頂部和底部創(chuàng)建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>