阴影box-shadow

阴影:

x轴的偏移量 y轴的偏移量 模糊值 阴影大小 颜色

box-shadow:h-shadow v-shadow blur spread color

h-shadow：阴影的水平偏移量，正数往右，负数往左；必须，单位：px；

v-shadow：阴影的垂直偏移量，正数往下，负数往上；必须值 单位：px；

blur：阴影的模糊值，不能为负数。可选 单位：px

spread：阴影大小；正数阴影扩大 ，（阴影的大小大于盒子的大小）负数阴影缩小（阴影大小小于盒子大小）

0阴影大小和盒子大小相同；

inset内阴影；

outset：默认值；

可以在一个元素上设置多个阴影，之间用逗号隔开；

文字阴影：

没有spreda属性；

模糊值不能设置负值

多背景：background-image:url("图片路径")，url("图片路径")；

不同的背景用逗号隔开，并且还可以给不同的背景设置不同属性(背景起始位置、背景是否重复等。)

书写顺序越靠前，显示越考上；

bacground- size

取值：width height 如果只设置一个值，第二个值会被自动设为auto

cover覆盖：等比例缩放背景图片铺满整个盒子，但是背景图片可能无法显示；

百分比：按照盒子的大小进行百分比计算 width height 如果只设置一个值，第二个值会被自动设为auto

contain：等比例缩放背景图片到完整的盒子中，但是背景图在区域范围内不能铺满，(取决于盒子和图片的比例不一致)

解决方法：

background-origin:padding-box 默认值，背景图相对于内填充区域进行定位；

background-origin：content-box；背景图相对于内容进行定位

background-orgin：border-box； 背景图相对于边框进行定位

background-clip：content-box 背景图裁剪到内容区域，仅在内容区显示

background-cilp：padding-box 背景裁剪到内填充区域，在内容和内填充区域显示

background-clip：borderbox 背景裁剪到边框区域，在内容区，内填充去，边框区显示。默认值