The use of box shadows in css3

Use of box shadow in css

We can use shadows to make some three-dimensional or dynamic-looking effects.

Syntax
box-shadow: h-shadow v-shadow blur spread color inset;
Insert picture description here
instance inner shadow and outer shadow

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.inner {
     
     
				width: 300px;
				height: 50px;
				line-height: 50px;
				margin: 100px auto;
				border: 1px solid #ddd;
				text-align: center;
				box-shadow: inset 0 0 10px #000;
			}
			
			.outer {
     
     
				width: 300px;
				height: 50px;
				line-height: 50px;
				margin: 260px auto;
				border: 1px solid #ddd;
				text-align: center;
				box-shadow:  0 0 10px #000;
			}
		</style>
	</head>
	<body>
		<div class="inner">哈哈哈哈哈哈哈哈哈哈哈啊哈哈</div>
		<div class="outer">哈哈哈哈哈哈哈哈哈哈哈啊哈哈</div>	
	</body>
</html>

Insert picture description here
Come on! IT people

Guess you like

Origin blog.csdn.net/qq_41880073/article/details/115026573