CSS3盒子模型内阴影--box-shadow
盒子内阴影使用box-shadow
box-shadow: inset 1px 1px 1px 1px #ccc; 第一个值代表是内阴影 第二个值是x轴偏移 第三个值是y轴偏移 第四个值是阴影模糊值 第五个值是阴影外延值 第六个值是阴...
盒子内阴影使用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样式 只需要在样式叠加前使用 ，隔开 效果如下：
更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。
如果你想用Python开辟副业赚钱，但不熟悉爬虫与反爬虫技术，没有接单途径，也缺乏兼职经验
关注下方微信公众号：Python编程学习圈，获取价值999元全套Python入门到进阶的学习资料以及教程，还有Python技术交流群一起交流学习哦。
- 发表于 2021-05-27 13:56
- 阅读 ( 1339 )
- 分类：WEB前端开发
