CSS3 box-shadow属性基础

最新推荐文章于 2024-11-13 16:47:20 发布

kairrys

最新推荐文章于 2024-11-13 16:47:20 发布

阅读量134

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/kairry_/article/details/102813786

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

定义和用法
box-shadow 属性向框添加一个或多个阴影。

语法

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

注释：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

值					描述	
h-shadow	    	必需。水平阴影的位置。允许负值。
v-shadow	        必需。垂直阴影的位置。允许负值。
blur				可选。模糊距离。
spread				可选。阴影的尺寸。
color				可选。阴影的颜色。请参阅 CSS 颜色值。
inset				可选。将外部阴影 (outset) 改为内部阴影。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>10.30测试</title>
		<style type="text/css">
			body,html {
				margin: 0;
				width: 100%;
				height: 100%;
			}
			.wrapper {
				width: 100%;
				height: 200px;
				display: flex;
				justify-content: space-around;
				align-items: center;
			}
			.box,.box2,.box3,.box4,.box5 {
				width: 200px;
				height: 100px;
				background: #EAEAEA;
				box-shadow: 10px 0;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				color: #EE6F2A;
				
			}
			.box2 {
				box-shadow: 10px 10px;
			}
			.box3 {
				box-shadow: 10px 10px 10px;
			}
			.box4 {
				box-shadow: 10px 10px 10px 10px;
			}
			.box5 {
				box-shadow: 10px 10px 10px 10px inset;
			}
		</style>
	</head>
	<body>
		<div class="wrapper">
			<div class="box">设置水平方向阴影<p>box-shadow: 10px 0;</p></div>
			<div class="box2">设置水平方向和垂直阴影<p>box-shadow: 10px 10px;</p></div>
			<div class="box3">设置水平、垂直、模糊距离<p>box-shadow: 10px 10px 10px;</p></div>
			<div class="box4">加上阴影尺寸<p>10px 10px 10px 10px</p></div>
			<div class="box5">改为内部阴影<p></p></div>
		</div>
	</body>
</html>

效果（没有设置阴影颜色的话，默认和字体的颜色一样）
在这里插入图片描述
设置了阴影颜色的效果

.box,.box2,.box3,.box4,.box5 {
				width: 200px;
				height: 100px;
				background: #EAEAEA;
				box-shadow: 10px 0 #ffcdb2;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
			}
			.box2 {
				box-shadow: 10px 10px #ffcdb2;
			}
			.box3 {
				box-shadow: 10px 10px 10px #ffcdb2;
			}
			.box4 {
				box-shadow: 10px 10px 10px 10px #ffcdb2;
			}
			.box5 {
				box-shadow: 10px 10px 10px 10px #ffcdb2 inset;
			}

![在这里插入图片描述](https://img-blog.csdnimg.cn/2019103013232824.png

设置h-shadow（水平阴影的值）和v-shadow（垂直阴影的值）为负值的阴影效果==（只允许h-shadow和v-shadow设置为负值，其它的参数设置为负值无效）==

.box,.box2,.box3,.box4,.box5 {
				width: 200px;
				height: 100px;
				background: #EAEAEA;
				box-shadow: -10px 0 #ffcdb2;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
			}
			.box2 {
				box-shadow: -10px -10px #ffcdb2;
			}
			.box3 {
				box-shadow: -10px -10px 10px #ffcdb2;
			}
			.box4 {
				box-shadow: -10px -10px 10px 10px #ffcdb2;
			}
			.box5 {
				box-shadow: -10px -10px 10px 10px #ffcdb2 inset;
			}