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
阅读 ( 1136 )
分类：WEB前端开发

CSS3盒子模型内阴影--box-shadow

你可能感兴趣的文章

相关问题

0 条评论

作家榜 »