盒子阴影box-shadow

最新推荐文章于 2022-09-16 11:38:49 发布

少年莫忧

最新推荐文章于 2022-09-16 11:38:49 发布

阅读量74

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/shaonianmoyou/article/details/125915927

版权

外阴影

box-shadow: inset 1px 1px 1px 1px #ccc;

分别代表的是内阴影（默认外阴影）

x轴偏移

y轴偏移

阴影模糊值

阴影外延值

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

加上外阴影（逗号隔开）

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