Shadow box

CSS3 added box shadows. We can use the box-shadow property to add shadow syntax to boxes:

box-shadow: H-shadow V-shadow blur spreadcolor inset;
Copy the code
  • H – shadow: required. Position of horizontal shadows. Negative values are allowed.
  • V – shadow: required. Position of vertical shadows. Negative values are allowed.
  • The blur is optional. Blur the distance.
  • Spread the optional. Shadow size.
  • Color optional. Shadow color
  • An inset is optional. Change the outer shadow to the inner shadow

<! DOCTYPEhtml>
<html>
<head>
	<title></title>
	<style type="text/css">
		.radius {
			width: 200px;
			height: 200px;
			background-color: pink;
			box-shadow: 10px 10px 10px 10px black ;
		}
	</style>
</head>
<body>
	<div class="radius"></div>
</body>
</html>
Copy the code

Note: 1. The default is outset but you cannot write this word as it will not work at all

2. Box shadow does not occupy space and will not affect the arrangement of other boxes.

Text shadow

In CSS3, we can use the text-shadow attribute to apply shadows to text. Grammar:

Test-shadow: H-shadow V-shadow blurcolor;
Copy the code
  • H-shadow: Required, position of horizontal shadow. Negative value allowed
  • V-shadow: Required, vertical shadow position. Negative value allowed
  • The blur: optional. Fuzzy distance
  • Color: optional. Shadow color

<! DOCTYPEhtml>
<html>
<head>
	<title></title>
	<style type="text/css">
		.radius {
			width: 200px;
			height: 200px;
			background-color: pink;
			font-size: 50px;
			text-shadow: 10px 10px 12px black;
		}
	</style>
</head>
<body>
	<div class="radius">
		12123123
	</div>
</body>
</html>
Copy the code