【css】边框阴影、文本阴影

__Pluto__

已于 2024-08-01 16:18:01 修改

阅读量476

点赞数 3

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

于 2024-08-01 16:11:48 首次发布

本文链接：https://blog.csdn.net/weixin_49611304/article/details/140849144

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、使用box-shadow属性为边框添加阴影

语法

box-shadow: h-shadow v-shadow blur spread color inset;

值	说明
h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的大小
color	可选。阴影的颜色。
inset	可选。从外层的阴影（开始时）改变阴影内侧阴影

* h-shadow 和 v-shadow 设置为负值时留意阴影位置变化

可以为元素边框添加一个或多个阴影。（不可继承，注意多阴影的层次，最前面的在最上面）

二、为文本添加阴影 text-shadow

语法

text-shadow: h-shadow v-shadow blur color;

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊的距离。
color	可选。阴影的颜色。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>【css】边框阴影、文本阴影</title>
		<style>
			body {
				display: flex;
				justify-content: space-around;
				padding-top: 100px;
				line-height: 200px;
				text-align: center;
			}

			body div {
				width: 200px;
				height: 200px;
				border-radius: 10%;
			}

			.box {
				box-shadow: 0px 0px 6px 4px red;
				text-shadow:
					-10px -10px 2px red,
					10px 10px 2px #00f;
			}

			.boxs {
				box-shadow:
					-4px -4px 6px 4px yellow,
					4px 4px 6px 4px green,
					4px -4px 6px 4px red,
					-4px 4px 6px 4px blue;
				text-shadow:
					10px 10px #ccc;
			}
		</style>
	</head>
	<body>
		<div class="box">单色边框阴影</div>

		<div class="boxs">多色边框阴影（注意层次）</div>
	</body>
</html>