neumorphism / 新拟态

* {
	margin:0;
	padding:0;
	font-family:"Poppins","Microsoft Yahei";
}
:root {
	--bgcolor:#ecf0f3;
}
body {
	background:var(--bgcolor);
}
body h1 {
	margin:70px;
	text-align:center;
	letter-spacing:2px;
	text-transform:uppercase;
	font-size:30px;
}
body .neumorphism {
	display:-ms-grid;
	display:grid;
	-ms-grid-columns:1fr 1fr 1fr;
	grid-template-columns:1fr 1fr 1fr;
	-ms-grid-rows:auto;
	grid-template-rows:auto;
	justify-items:center;
	-webkit-box-align:center;
	-ms-flex-align:center;
	align-items:center;
}
body .neumorphism .neumorphism {
	width:300px;
	height:300px;
	border-radius:50%;
	background:var(--bgcolor);
}
body .neumorphism .neumorphism. {
	-webkit-box-shadow:10px 10px 20px #bdc0c2,-10px -10px 20px #ffffff;
	box-shadow:10px 10px 20px #bdc0c2,-10px -10px 20px #ffffff;
}
body .neumorphism .neumorphism.-inset {
	border:2px solid var(--bgcolor);
	-webkit-box-shadow:10px 10px 20px #bdc0c2,-10px -10px 20px #ffffff,inset 10px 10px 20px #bdc0c2,inset -10px -10px 20px #ffffff;
	box-shadow:10px 10px 20px #bdc0c2,-10px -10px 20px #ffffff,inset 10px 10px 20px #bdc0c2,inset -10px -10px 20px #ffffff;
}
body .neumorphism .neumorphism.inset {
	-webkit-box-shadow:inset 10px 10px 20px #bdc0c2,inset -10px -10px 20px #ffffff;
	box-shadow:inset 10px 10px 20px #bdc0c2,inset -10px -10px 20px #ffffff;
}
/*# sourceMappingURL=style.css.map */