CSS（十九）：盒子阴影、文字阴影

盒子阴影

box-shadow属性为可以设置

盒子阴影

语法

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

说明

属性值	说明
h-shadow	必须。水平阴影的位置。允许负值
v-shadow	必须。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的尺寸
color	可选。阴影的颜色
inset	可选。将外部阴影(outset)改为内部阴影

注意：
- 默认的阴影是外阴影(outset)，但是不可以写，否则导致阴影无效
- 盒子阴影不占用空间，不会影响其他盒子排列

示例：当鼠标经过盒子时设置阴影

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子阴影</title>
    <style>
        div {
            width: 300px;
            height: 200px;
            background-color: purple;
            /* box-shadow: 10px 10px 10px 10px black; */
            /* box-shadow: 10px 10px 10px 10px black inset; */
        }
        div:hover {
            box-shadow: 10px 10px 10px 10px #ccc;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

文字阴影

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>文字阴影</title>
    <style>
        div {
            font-size: 50px;
            color: purple ;
            text-shadow: 5px 5px 5px #ccc;  
        }
    </style>
</head>
<body>
    <div>
        文字阴影
    </div>
</body>
</html>

posted @ 2022-07-25 16:27 pure3417 阅读(296) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· CSS（十四）：盒子模型

· CSS（十一）：background（背景属性）

· CSS文字、盒子阴影

· CSS：盒子阴影

· css - 盒子模型盒子阴影box-shadow

阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· 什么是nginx的强缓存和协商缓存
· 一文读懂知识蒸馏
· Manus爆火，是硬核还是营销？

公告

昵称： pure3417
园龄： 3年11个月
粉丝： 31
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

pure3417

CSS（十九）：盒子阴影、文字阴影

盒子阴影

文字阴影

公告

搜索

积分与排名

随笔分类 (150)

个人blog网址

阅读排行榜

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>盒子阴影</title>
	<style>
	div {
	width: 300px;
	height: 200px;
	background-color: purple;
	/* box-shadow: 10px 10px 10px 10px black; */
	/* box-shadow: 10px 10px 10px 10px black inset; */
	}
	div:hover {
	box-shadow: 10px 10px 10px 10px #ccc;
	}
	</style>
	</head>
	<body>
	<div></div>
	</body>
	</html>