【CSS 24】阴影 text-shadow box-shadow 卡片

Zanebla

于 2023-07-07 15:53:36 发布

阅读量1.3k

点赞数 1

分类专栏： CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/m0_62629457/article/details/131594996

版权

CSS 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

本文介绍了如何使用CSS的text-shadow属性为文本添加各种阴影效果，包括单色阴影、霓虹发光效果以及多重阴影的组合。同时，还阐述了box-shadow属性在为元素添加阴影，包括卡片效果等方面的应用。

摘要由CSDN通过智能技术生成

CSS

- - 阴影
  - Box Shadow

阴影

通过使用 CSS，您可以在文本和元素上添加阴影

text-shadow
box-shadow

CSS文字阴影
CSS text-shadow 属性为文本添加阴影
最简单的用法是只指定水平阴影（2px）和垂直阴影（2px），然后是颜色以及模糊效果

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
	text-shadow: 2px 2px 5px green;
}
</style>
</head>
<body>

<h1>文本阴影效果</h1>

</body>
</html>

下面的例子展示了带有黑色阴影的白色文本

h1 {
	color: white;
	text-shadow: 2px 2px 4px #000000;
}

下面的例子展示了红色的霓虹发光阴影

h1 {
	text-shadow: 0 0 3px #FF0000;
}

多个阴影
如需在文本中添加多个阴影，您可以添加以逗号分隔的阴影列表
下面的例子展示了红色和蓝色的霓虹灯发光阴影

h1 {
	text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

下面的例子展示了带有黑色、蓝色和深蓝色阴影的白色文本

h1 {
	color: white;
	text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

还可以使用 text-shadow 属性在文本周围创建纯边框（无阴影）

h1 {
	color: yellow;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

Box Shadow

CSS box-shadow 属性应用阴影于元素
最简单的用法是只指定水平阴影和垂直阴影10px 10px
为阴影添加颜色 grey
向阴影添加模糊效果 5px

<!DOCTYPE html>
<html>
<head>
<style>
div {
	width: 300px;
	height: 100px;
	padding: 15px;
	background-color: yellow;
	box-shadow: 10px 10px 5px grey;
}
</style>
</head>
<body>

<h1>box-shadow属性</h1>

<div>已设置 box-shadow 的 div 元素</div>

</body>
</html>

卡片
您还可以使用 box-shadow 属性创建纸质卡片效果

div.card {
	width: 250px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	text-align: center;
}

div.header {
	background-color: #4CAF50;
	color: white;
	padding: 10px;
	font-size: 40px;
}

div.container {
	padding: 10px;
}