css阴影和光影效果-html代码-BFW代码库

css阴影和光影效果

代码语言：html

代码描述：css阴影和光影效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
  background-color: #999;
  font-family: sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.circle,
.inner,
.circle::before {
  border-radius: 50%;
}
.circle {
  background-color: #fff;
  padding: 20px;
  position: relative;
  box-shadow: inset -20px 20px 20px rgba(0,0,0,.2), -20px 20px 30px #666;
  margin-right: 80px;
}
.circle::before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  box-shadow: inset -2px 2px 2px #fff;
}
.inner {
	height: 140px;
	width: 140px;
	display: flex;
	align-items: center;
	justify-content: center;
  box-shadow: inset -3px 3px 6px rgba(0, 0, 0, .3);
}
.inner.blue {
	background: #13d8d8;
  background: -moz-linear-gradient(45deg, #13d8d8 0%, #00a7c7 100%);
  background: -webkit-linear-gradient(45deg, #13d8d8 0%,#00a7c7 100%);
  background: linear-gradient(45deg, #13d8d8 0%,#00a7c7 100%);
}
.inner.purple {
  background: #a100ff;
  background: -moz-linear-gradient(45deg, #a100ff 0%, #6a00bc 100%);
  background: -webkit-linear-gradient(45deg, #a100ff 0%,#6a00bc 100%);
  background: linear-gradient(45deg, #a10.........完整代码请登录后点击上方下载按钮下载查看