css3盒子内阴影box-shadow

盒子内阴影使用box-shadow

box-shadow: inset 1px 1px 1px 1px #ccc; 第一个值代表是内阴影 第二个值是x轴偏移 第三个值是y轴偏移 第四个值是阴影模糊值 第五个值是阴影外延值 第六个值是阴影颜色

div {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background-color: #ccc;
	box-shadow: inset 13px 8px 1px 16px #555;
}
<div></div>

以上代码实现以下效果：

Extend:

	div {
            width: 100px;
            height: 100px;	
            border-radius: 50%;
            box-shadow: inset 13px 8px 1px 16px #555, 3px 3px 10px 10px blueviolet;
        }

你也可以叠加box-shadow样式 只需要在样式叠加前使用 ，隔开 效果如下：