css怎么给一个盒子加盒阴影?

css怎么给一个盒子加盒阴影?下面本篇文章给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

CSS3定义了两种阴影:盒子阴影和文本阴影。其中盒子阴影需要IE9及其更新版本,而文本阴影需要IE10及其更新版本。下面分别介绍盒子阴影的使用。

1、盒子阴影的属性是 box-shadow

CSS3 box-shadow 属性用来描述一个元素的一个或多个阴影效果,该属性几乎可以让你完成你想要的任何阴影效果。

box-shadow:5px 5px 10px gray;

前两个值分别表示阴影水平方向和垂直方向的偏移量。

第三个值表示模糊距离。最后一个值是阴影颜色。

2、盒子阴影是可以随着盒子形状而自动变化的

3、如果盒子下面有内容的话,可以使用 rgba() 函数,将阴影颜色设置为半透明的

box-shadow:5px 5px 10px rgba(0,0,0,0.5);

4、伸展范围设置

在模糊距离后面还可以添加一个值,表示伸展范围(spread)。用来增大模糊边界之前的实心颜色面积。

下面昨天是未设置伸展范围,右图设置了:

box-shadow:5px 5px 10px 5px gray;

5、在颜色后面加上 inset 用来创建内部阴影

box-shadow:5px 5px 10px gray inset;

网上找了几张图,大家可以对应的看一下,更加好理解。

1.png

2.png

3.png

再说的具体一点:

CSS 代码:

div {
    width: 150px;
    height: 150px;
    background-color: #fff;
    
    box-shadow: 120px 80px 40px 20px #0ff;
    /* 顺序为: offset-x, offset-y, blur-size, spread-size, color */
    /* blur-size 和 spread-size 是可选的 (默认为 0) */
}

来个图解:

4.png

示例:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<style>
			.flex {
				display: flex;
				flex-wrap: wrap;
			}
			
			.flex-item {
				margin-right: 30px;
			}
			
			.box {
				background-color: #CCCCCC;
				border-radius: 10px;
				width: 200px;
				height: 200px;
			}
			
			.boxshadow1 {
				box-shadow: inset 0px 0px 5px 1px #000;
			}
			
			.boxshadow2 {
				box-shadow: inset 0 1px 2px 1px #000;
			}
			
			.boxshadow3 {
				box-shadow: 0 0 10px #000;
			}
			
			.boxshadow4 {
				box-shadow: 2px 2px 5px #000;
			}
			
			.boxshadow5 {
				box-shadow: 0 0 5px 15px #000;
			}
			
			.boxshadow6 {
				box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, .2);
			}
		</style>
	</head>

	<body>
		<div class="flex">
			<div class="flex-item">
				<h3>内阴影示例</h3>
				<div class="box boxshadow1"></div>
			</div>
			<div class="flex-item">
				<h3>3边内影示例</h3>
				<div class="box boxshadow2"></div>
			</div>
			<div class="flex-item">
				<h3>外阴影示例</h3>
				<div class="box boxshadow3"></div>
			</div>
			<div class="flex-item">
				<h3>右下外阴影示例</h3>
				<div class="box boxshadow4"></div>
			</div>
			<div class="flex-item">
				<h3>扩大阴影示例</h3>
				<div class="box boxshadow5"></div>
			</div>
			<div class="flex-item">
				<h3>半透明阴影色示例</h3>
				<div class="box boxshadow6"></div>
			</div>
		</div>

	</body>

</html>

效果图:

6.png

更多web前端相关知识,请查阅 HTML中文网 !!

以上就是css怎么给一个盒子加盒阴影?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏