盒子内阴影使用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样式 只需要在样式叠加前使用 ，隔开 效果如下：
