css3盒子阴影box-shadow

原创于 2019-08-16 18:29:23 发布 · 194 阅读

CC 4.0 BY-SA版权

9 篇文章

订阅专栏

本文详细介绍了如何使用CSS3的box-shadow属性为网页元素添加阴影效果。通过设置x轴和y轴偏移、阴影模糊度、外延值及颜色，可以轻松创建美观的阴影样式，提升网页视觉体验。

盒子阴影使用css3的box-shadow属性

box-shadow: 0px 0px 0px 0px #ccc; 第一个值是x轴偏移第二个值是y轴偏移第三个值是阴影模糊值第四个值是阴影外延值第五个值是阴影颜色

div {
	margin: 100px auto;
	width: 100px;
	height: 100px;
	box-shadow: 1px 1px 1px 1px #ccc;
}

<div></div>

以上代码实现以下效果：
在这里插入图片描述