box-shadow用法详解

1、box-shadow概述

用来实现对元素产生阴影效果

1.1、box-shadow常用属性

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

box-shadow: X 轴偏移量 Y 轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 投影方式 ;

h-shading: 水平阴影 允许负值

v-shading: 垂直阴影 允许负值

blur: 模糊距离

spread: 阴影大小

color: 阴影颜色

inset: 内投影

1.2、创建一个基本案例,用于测试box-shadow

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#content{
				width: 200px;
				height: 200px;
				background-color: red;
				margin: 0 auto;
				margin-top: 150px;
			}
		</style>
	</head>
	<body>
		<div id="content">
			
		</div>
	</body>
</html>

1.3、产生阴影

box-shadow: 0 0 0 30px black;

产生一个30px的阴影。这个只是产生阴影,但是比较的生硬

下图:红色是div,黑色是阴影

1.4、让阴影产生模糊效果

box-shadow: 0 0 30px 30px black;

增加了30px的模糊半径,阴影更像阴影了。

1.5、让阴影产生水平偏移

box-shadow:30px 0 30px 30px black;

水平(v-shadow)增加了30px,水平右移动,负值向左偏移。

1.6、让阴影产生垂直偏移

box-shadow: 30px 30px 30px 30px black;

水平(h-shadow)增加了30px,垂直下移,负值向上偏移。

1.7、产生内投影

box-shadow: 30px 30px 30px 30px black inset;

可以根据自己的需求调整变化,达到自己的满意的效果。

相关推荐
YongGit16 分钟前
探索 AI + MCP 渲染前端 UI
前端·后端·node.js
慧一居士1 小时前
<script setup>中的setup作用以及和不带的区别对比
前端
RainbowSea1 小时前
NVM 切换 Node 版本工具的超详细安装说明
java·前端
读书点滴1 小时前
笨方法学python -练习14
java·前端·python
Mintopia2 小时前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
Mintopia2 小时前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
Penk是个码农2 小时前
web前端面试-- MVC、MVP、MVVM 架构模式对比
前端·面试·mvc
MrSkye2 小时前
🔥JavaScript 入门必知:代码如何运行、变量提升与 let/const🔥
前端·javascript·面试
白瓷梅子汤2 小时前
跟着官方示例学习 @tanStack-form --- Linked Fields
前端·react.js
爱学习的茄子2 小时前
深入理解JavaScript闭包:从入门到精通的实战指南
前端·javascript·面试