The Developer Brains


CSS3 BOX-SHADOW

Web Designing | Web Development


SEE MORE














</CSS3 BOX-SHADOW>





Box-Shadow is a CSS property which is use to give shadow effects to HTML elements. We can use multiple css box-shadow properties to give an attractive 3D look to HTML elements.


SEE MORE
























</CSS3 BOX-SHADOW>


How to use box-shadow property?

We can attach one or more shadow with HTML elements. A CSS3 box-shadow property used X and Y offset relative to HTML element
  • SYNTAX
    box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];


<style>
/*example*/
.tdb-shadow{
	width:50px;
	height:50px;
	box-shadow:5px 0 0 5px gray;
}
</style>





	

<head>
	<style>
	.tdb-shadow{
		padding:15px 0;
		text-align:center;
		width:150px;
		border-radius:5px;
		box-shadow:2px 2px 5px 0px gray;
		}
	</style>
</head>

<body>
	<div class="tdb-shadow">Box-Shadow</div>
</body>




Try it Yourself









Box-Shadow Examples

Shadow1
Shadow2
Shadow3

Shadow4
Shadow5
Shadow6


















what is the correct format of box-shadow property?
1. box-shadow:5px 0 gray 0 5px;
2. box-shadow:gray 5px 0 0 5px;
3. box-shadow:5px, 0, 0, 5px, gray;
4. box-shadow:5px 0 0 5px gray;



Check Now



CSS3 QUIZ







Next: CSS3 Display Property


Previous

      

Next Page













  Share TDB SCHOOL  

Share this E-Learning Website on social media platforms with your friends and followers