Effect How to - Create CSS3 shadow

Question

We would like to know how to create CSS3 shadow.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
div {<!--from ww  w  . jav  a 2  s. c om-->
  width: 90%;
  height: 100px;
  max-width: 980px;
  margin: 0 auto;
  background: rgb(25, 98, 12);
  color: white;
  box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 2px, rgba(0, 0, 0, 0.4) 3px 3px
    2px, rgba(0, 0, 0, 0.3) 5px 5px 2px, rgba(0, 0, 0, 0.2) 7px 7px 2px,
    rgba(0, 0, 0, 0.1) 9px 9px 2px, rgba(0, 0, 0, 0.3) 0px 0px 8px inset;
  line-height: 100px;
  text-align: center;
}
</style>
</head>
<body>
  <div>hello!</div>
</body>
</html>

The code above is rendered as follows: