CSS3 盒子阴影(box-shadow)

最新推荐文章于 2024-09-14 16:00:26 发布

houyanhua1

最新推荐文章于 2024-09-14 16:00:26 发布

阅读量276

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/houyanhua1/article/details/79645313

CSS 同时被 3 个专栏收录

65 篇文章

订阅专栏

HTML5

54 篇文章

订阅专栏

CSS3

33 篇文章

订阅专栏

本文介绍了一个简单的HTML页面，其中包含一个使用CSS盒阴影效果样式的盒子。通过设置不同的阴影属性，如水平位移、垂直位移、模糊度大小及颜色等，展示了如何为网页元素添加内外阴影。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

demo.html：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body {
			background-color: #eee;
		}

		.box {
			width: 200px;
			height: 300px;
			margin: 100px auto;
			background-color: #fff;

			box-shadow: 15px 21px 38px -2px #666;  /* 盒子阴影: 水平位移 垂直位移 模糊度 大小 颜色 */
			box-shadow: 15px 21px 38px -2px #666 inset;  /* inset表示内阴影,默认是外阴影 */
		}

	</style>
</head>
<body>
	<div class="box"></div>
</body>
</html>