The box-shadow CSS property will add a shadow beneath associate degree HTML component thus it's am fond of it is raised on top of the opposite HTML components within the page, virtually like 3D.
The offsetX and offsetY parameters specify what quantity the shadow is to "stick out" from the hypertext mark-up language part. The offsetX parameter specifies the gap on the coordinate axis and also the offsetY specifies the gap on the coordinate axis. you'll use each positive and negative numbers to manage wherever the shadow is displayed.
The box-shadow CSS property takes five parameters. The format seems like this:
<!DOCTYPE html>
<html>
<title>2D</title>
<head>
<style>
div{
height:200px;
width:200px;
border:2px solidgray;
border-radius:20px;
box-shadow:20px 10px 20px black , 30px 20px 30px green;
background:-webkit-linear-gradient(rgba(200,120,220,0),rgba(200,220,20,1))
}
#d1{
-webkit-transform:rotate(45deg);
}
#d2{
margin:200px;
-webkit-transform:scale(2.0,2.0);
}
#d3{
-webkit-transform:translate(50px,50px);
}
#d4{
-webkit-transform:skew(45deg,40deg);
}
</style>
</head>
<body>
<div id="d1">d1</div>
<div>d2</div>
<div>d3</div>
<div>d4</div>
</body>
</html>
Comments
Post a Comment