盒子内阴影和文字内阴影

先看效果图:

是不是很漂亮,这就要使用css的内阴影属性了。很简单,下面我们就去揭开它的面纱:

盒子内阴影CSS:

box-shadow: inset 8px 8px 16px #90bac7,inset -8px -8px 12px #c3f0ff;

当然,需要设置背景色,阴影色要与背景色接近。以下是案例的css:

body {
			background: #ADD8E6;
		}
		
.box {
			border-radius: 50%;
			width: 300px;
			height: 300px;
			line-height: 300px;
			margin: 150px auto 0 auto;
			text-align: center;
			background: #ADD8E6;
			box-shadow: inset 8px 8px 16px #90bac7, inset -8px -8px 12px #c3f0ff; 
		}

是不是很简单?

那么文字内阴影呢?不能再用box-shadow了,那样背景一块色,只能用text-shadow

text-shadow: 2px 2px 0px #90bac7, -1px -1px 0px #c3f0ff

以下为案例css:

.box span {
			font-size: 40px;
			color: #ADD8E6;
			text-shadow: 2px 2px 0px #90bac7, -1px -1px 0px #c3f0ff
		}