css使用box-shadow

68次阅读
没有评论

在 CSS 中,我们可以使用 box-shadow 属性向元素添加一个或多个阴影。该属性需要 4 个参数:水平偏移量、垂直偏移量、模糊半径和可选的扩散半径。我们还可以指定阴影的颜色、是否内部阴影等。

以下是一个简单的示例,演示如何在 CSS 中使用 box-shadow 属性:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>使用CSS的box-shadow属性</title>
	<style>
		.shadow {
			width: 200px;
			height: 200px;
			background-color: #fff;
			box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
		}
	</style>
</head>
<body>
	<div class="shadow"></div>
</body>
</html>

在上面的示例中,我们创建了一个 div 元素,并将其指定为一个具有阴影效果的元素。我们首先为元素指定了宽度和高度,然后设置了背景色为白色。

接下来,我们使用 box-shadow 属性来为该元素添加阴影。我们将水平偏移量、垂直偏移量和模糊半径都设置为 10 像素,颜色设置为半透明的黑色。这将在元素的右下角创建一个稍微模糊的阴影效果。

最后,我们在页面中放置了一个该元素的实例,以显示该效果。

正文完
 
评论(没有评论)