box-shadow用法详解

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>
<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;

可以根据自己的需求调整变化，达到自己的满意的效果。
相关阅读:
git push 报错 The requested URL returned error: 500
博途PLC S7-1200/1500 ModbusTcp通信SCL代码篇（轮询）
Python究竟属不属于嵌入式语言？
scrapy实现分布式爬虫，scrapy-redis所遇到的问题，终端进入虚拟环境
 【解包裹】基于Matlab实现多聚类相位展开算法
 Springboot毕设项目办公用品管理系统c1139（java+VUE+Mybatis+Maven+Mysql）
推荐系统最经典的排序模型有哪些？你了解多少？
vscode按住ctrl+鼠标左键无法跟踪跳转方法名【带vscode编辑PHP的配置教程】
集合的进阶
 IOC课程整理-17 Spring事件
原文地址：https://blog.csdn.net/tangshiyilang/article/details/134328619

1、box-shadow概述

1.1、box-shadow常用属性

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

1.3、产生阴影

1.4、让阴影产生模糊效果

1.5、让阴影产生水平偏移

1.6、让阴影产生垂直偏移

1.7、产生内投影