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;

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

相关推荐
UrbanJazzerati4 分钟前
前端入门:vh、padding、margin、outline、pointer-events
前端·面试
wordbaby14 分钟前
一行看懂高阶函数:用 handleConfirm 拿下 DatePicker 回调
前端·react.js
卿·静20 分钟前
Node.js对接即梦AI实现“千军万马”视频
前端·javascript·人工智能·后端·node.js
Mintopia34 分钟前
🚀 Next.js 全栈 Web Vitals 监测与 Lighthouse 分析
前端·javascript·全栈
Mintopia36 分钟前
🤖 AIGC + CMS:内容管理系统智能化的核心技术支撑
前端·javascript·aigc
HelloGitHub39 分钟前
这款开源调研系统越来越“懂事”了
前端·开源·github
whysqwhw42 分钟前
hippy的主要原理
前端
子兮曰1 小时前
🚀95%的前端开发者都踩过坑:JavaScript循环全解析,从基础到高阶异步迭代
前端·javascript·性能优化
2401_853406881 小时前
Tdesign-React 组件 Card 实现头部固定,内容区单独可滚动
前端·react.js·tdesign
蓝倾9761 小时前
小红书获取用户作品列表API接口操作指南
java·服务器·前端·python·电商开放平台·开放api接口