devbox
菜鸟追梦旅行
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：菜鸟追梦旅行 | 2024-05-04 12:38:30

赞

踩

盒子阴影

文章目录





一、盒子模型阴影


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

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

  • 1

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


1、标准阴影示例


标准的阴影代码 :

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

  • 1
  • 2
  • 3

展示效果 :
在这里插入图片描述


2、水平阴影示例


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

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

  • 1
  • 2
  • 3

展示效果 :

在这里插入图片描述

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

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

  • 1
  • 2
  • 3

展示效果 :
在这里插入图片描述


3、垂直阴影示例


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

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

  • 1
  • 2
  • 3

展示效果 :

在这里插入图片描述

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

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

  • 1
  • 2
  • 3

展示效果 :

在这里插入图片描述


5、模糊距离示例


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

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

  • 1
  • 2
  • 3

展示效果 :

在这里插入图片描述


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

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

  • 1
  • 2
  • 3

展示效果 : 该值只能大于等于 0 ;
在这里插入图片描述


6、阴影尺寸示例


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

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

  • 1
  • 2
  • 3

展示效果 :

在这里插入图片描述


7、阴影颜色示例


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

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

  • 1
  • 2
  • 3

展示效果 :
在这里插入图片描述


8、内外阴影示例


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

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

  • 1
  • 2
  • 3

展示效果 :

在这里插入图片描述


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

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

  • 1
  • 2
  • 3

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

在这里插入图片描述





二、常用代码示例


代码示例 :

<!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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30

显示效果 :

在这里插入图片描述

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号