css盒子模型阴影

最新推荐文章于 2024-07-25 10:45:42 发布

坐在坟头看鬼哭

最新推荐文章于 2024-07-25 10:45:42 发布

阅读量224

点赞数 8

文章标签： css 前端

本文链接：https://blog.csdn.net/2402_83159928/article/details/139882574

版权

一、css盒子模型阴影

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

box-shadow: 水平阴影 垂直阴影 模糊度

只有前两个阴影，水平和垂直必须写，后面模糊度的四个值可以省略；

标准阴影例：

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

水平阴影例：

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

水平阴影只需要改第一个值

垂直阴影例：

垂直阴影代码：只修改第二个值

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

模糊阴影例：

模糊阴影代码只修改第三个值；

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

阴影尺寸例：

阴影尺寸只修改第四个值；

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

阴影颜色例：

阴影颜色代码只修改第五个值；

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

常用代码

例：

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