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