【CSS】盒子模型阴影 ( box-shadow: 水平阴影垂直阴影模糊距离阴影尺寸阴影颜色内外阴影； )

韩曙亮

发布于 2023-03-25 11:38:03

1.2K00

代码可运行

文章被收录于专栏：韩曙亮的移动开发专栏韩曙亮的移动开发专栏

运行总次数：0

代码可运行

文章目录

一、盒子模型阴影

盒子模型阴影使用如下属性设置 :

box-shadow: 水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内外阴影;

只有前两个阴影 , 水平阴影和垂直阴影必须写 , 后面的四个值可以省略 ;

1、标准阴影示例

标准的阴影代码 :

			/* box-shadow: 水平阴影 垂直阴影 
			  模糊距离 阴影尺寸 阴影颜色 内外阴影；*/
			box-shadow: 2px 2px 2px 2px black;

展示效果 :

2、水平阴影示例

水平阴影代码 : 只修改第一个属性值 ;

			/* box-shadow: 水平阴影 垂直阴影 
			  模糊距离 阴影尺寸 阴影颜色 内外阴影；*/
			box-shadow: 20px 2px 2px 2px black;

展示效果 :

水平阴影代码2 : 只修改第一个属性值 ;

			/* box-shadow: 水平阴影 垂直阴影 
			  模糊距离 阴影尺寸 阴影颜色 内外阴影；*/
			box-shadow: -20px 2px 2px 2px black;

展示效果 :

3、垂直阴影示例

垂直阴影代码 : 只修改第二个属性值 ;

			/* box-shadow: 水平阴影 垂直阴影 
			  模糊距离 阴影尺寸 阴影颜色 内外阴影；*/
			box-shadow: 2px 20px 2px 2px black;

展示效果 :

垂直阴影代码2 : 只修改第二个属性值 ;

			/* box-shadow: 水平阴影 垂直阴影 
			  模糊距离 阴影尺寸 阴影颜色 内外阴影；*/
			box-shadow: 2px -20px 2px 2px black;

展示效果 :

5、模糊距离示例

模糊距离代码 : 只修改第三个属性值 ;

/* box-shadow: 水平阴影 垂直阴影 
模糊距离 阴影尺寸 阴影颜色 内外阴影；*/
box-shadow: 2px 2px 20px 2px black;

展示效果 :

模糊距离代码2 : 只修改第三个属性值 ;

/* box-shadow: 水平阴影 垂直阴影 
模糊距离 阴影尺寸 阴影颜色 内外阴影；*/
box-shadow: 2px 2px -20px 2px black;

展示效果 : 该值只能大于等于 0 ;

6、阴影尺寸示例

阴影尺寸示例代码 : 只修改第四个属性值 ;

/* box-shadow: 水平阴影 垂直阴影 
模糊距离 阴影尺寸 阴影颜色 内外阴影；*/
box-shadow: 2px 2px 2px 20px black;

展示效果 :

7、阴影颜色示例

阴影颜色示例代码 : 只修改第五个属性值 ;

/* box-shadow: 水平阴影 垂直阴影 
模糊距离 阴影尺寸 阴影颜色 内外阴影；*/
box-shadow: 2px 2px 2px 2px blue;

展示效果 :

8、内外阴影示例

内外阴影示例代码 : 只修改第六个属性值 ; 如果设置外阴影 , 不需要写第六个值 , 就是默认状态 , 写了就错了 ;

/* box-shadow: 水平阴影 垂直阴影 
 模糊距离 阴影尺寸 阴影颜色 内外阴影；*/
box-shadow: 2px 2px 2px 2px black;

展示效果 :

内外阴影示例代码 : 只修改第六个属性值 ; 如果设置内阴影 , 第六个属性值设置 inset ;

/* box-shadow: 水平阴影 垂直阴影 
模糊距离 阴影尺寸 阴影颜色 内外阴影；*/
box-shadow: 2px 2px 2px 2px black inset;

展示效果 : 该写法几乎不用 ;

二、常用代码示例

代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>    
	<meta charset="UTF-8" /> 
    <title>盒子模型阴影</title>
	<style type="text/css">
		/* 清除标签默认的内外边距 */
		* {
		   padding: 0;     
		   margin: 0;
		}
		
		div {
			width: 200px;
			height: 200px;
			background-color: pink;
			
			/* 盒子垂直居中 */
			margin: 50px auto;
			
			/* box-shadow: 水平阴影 垂直阴影 
			  模糊距离 阴影尺寸 阴影颜色 内外阴影；*/
			box-shadow: 0 15px 30px rgba(0,0,0,.3);
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

显示效果 :

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023-03-20，如有侵权请联系 cloudcommunity@tencent.com 删除

模型

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

模型

登录后参与评论

0 条评论

热度