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;

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

相关推荐
知识分享小能手21 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队1 天前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光1 天前
css之一个元素可以同时应用多个动画效果
前端·css
huangql5201 天前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js
Days20501 天前
LeaferJS好用的 Canvas 引擎
前端·开源
小白菜学前端1 天前
vue2 常用内置指令总结
前端·vue.js
林_深时见鹿1 天前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js
椒盐螺丝钉1 天前
Vue组件化开发介绍
前端·javascript·vue.js
koooo~1 天前
v-model与-sync的演变和融合
前端·javascript·vue.js
matlab的学徒1 天前
Web与Nginx网站服务(改)
linux·运维·前端·nginx·tomcat