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;

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

相关推荐
前端(从入门到入土)4 分钟前
前端请求后端服务403(Invalid CORS request)
前端
蓝天白云下遛狗31 分钟前
goole chrome变更默认搜索引擎为百度
前端·chrome
come112341 小时前
Vue 响应式数据传递:ref、reactive 与 Provide/Inject 完全指南
前端·javascript·vue.js
musk12122 小时前
electron 打包太大 试试 tauri , tauri 安装打包demo
前端·electron·tauri
万少3 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL3 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl023 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang3 小时前
前端如何实现电子签名
前端·javascript·html5
今天又在摸鱼3 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿3 小时前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端