CSS3 box shadow syntax:
box-shadow:inset x-offset y-offset blur-radius spread-radius color
This is for Firefox4.0+, Google Chrome 10.0+, Opera10.5+ and IE9
For Safari and Google Chrom10.0-, which used webkit core -webkit, i.e.we use
-webkit-box-shadow
For Firefox 4.0-, which used Mozilla core -moz, i,e we use:
-moz-box-shadow
Example code for shadow box: here I also use CSS3 transform to rotate the box,
use border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius for box corner radius.
<html>
<head>
<style>
.demo1 {
/*box-shadow:inset x-offset y-offset blur-radius spread-radius color*/
/*Safari and Google Chrom10.0-*/
-webkit-box-shadow: 3px 3px 3px;
/*Firefox 4.0-*/
-moz-box-shadow: 3px 3px 3px;
/*Firefox4.0+, Google Chrome 10.0+, Opera10.5+ and IE9*/
box-shadow: 3px 3px 3px;
width: 50%;
height:200px;
background-color:lightblue;
transform:rotate(-5deg);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
</style>
</head>
<body>
<h1>CSS3 box shadow</h1>
<div class="demo1">test</div>
</body>
</html>
Demo result:
test
No comments:
Post a Comment