CSS3——边框阴影 box-shadow

最新推荐文章于 2022-08-04 11:43:02 发布

迷失的小鹿

最新推荐文章于 2022-08-04 11:43:02 发布

阅读量417

点赞数

文章标签： box-shadow

本文链接：https://blog.csdn.net/Java_Fly1/article/details/102993416

版权

CSS3——边框阴影 box-shadowbox-shadow

代码语法：
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

值	描述
X轴偏移量	必需，水平阴影的位置，允许负值
Y轴偏移量	必需，垂直阴影的位置，允许负值
阴影模糊半径	可选，模糊距离
阴影扩展半径	可选，阴影的吃醋
阴影颜色	可选，运用的颜色，省略默认为黑色
投影方式	可选，设置inset时为内部阴影方式，省略为外阴影方式

inset可以卸载参数的第一个或最后一个，其他位置时无效的

外部阴影

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
			}
			.boxshadow-outset{
				/* 垂直偏移量为0  垂直偏移量为0px 模糊半径为6px 阴影颜色为黑色 */
				box-shadow: 0px 0px 6px #333;
			}
		</style>
	</head>
	<body>
		<div class="boxshadow-outset">
		</div>
	</body>
</html>

内阴影

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
			}
			.boxshadow-inset{
				/* 垂直偏移量为0  垂直偏移量为0px 模糊半径为6px 阴影颜色为黑色 
				inset:设置投影的方式为内阴影，这个参数一般在第一个或者最后一个
				*/
				box-shadow: 0px 0px 6px #333 inset;
			}
		</style>
	</head>
	<body>
		<div class="boxshadow-inset"></div>
	</body>
</html>

添加多个阴影

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
			}
			.boxshadow-inset{
				/* 添加多个阴影，只需用逗号隔开即可 */
				box-shadow: 0px 0px 6px #333 inset,
				0px 0px 10px pink;
			}
		</style>
	</head>
	<body>
		<div class="boxshadow-inset"></div>
	</body>
</html>

1、阴影模糊半径与阴影扩展半径的区别

阴影模糊半径：此参数可选，其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；
阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；

2、X轴偏移量和Y轴偏移量值可以设置为负数

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

迷失的小鹿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3——边框阴影 box-shadow

CSS3——边框阴影 box-shadowbox-shadow外部阴影内阴影添加多个阴影1、阴影模糊半径与阴影扩展半径的区别2、X轴偏移量和Y轴偏移量值可以设置为负数代码语法：box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];值描述X轴偏移量必需，水平阴影的位置，允许负值Y轴偏移量必需，垂直阴影的...
复制链接

扫一扫