一、CSS背景样式[背景样式、盒子阴影]

一、CSS背景样式

1.背景样式

1.1 背景颜色

代码：background-color: red;

1.2 背景图片

代码：background-image: url(icon-s.jpg);

1.3 背景裁切

解释：该裁切比较有意思，其实就是图片显示的范围是否在边框显示，是否要显示在内边距里面，还是只是在内容区域（不太懂这个区域的请认真阅读前篇盒子模型）

选项	说明
border-box	边框以内都显示（包含边框、内边距、内容）
padding-box	内边距以内都显示（包含内边距、内容）
content-box	内容区域（包含内容）

代码：background-clip: border-box;//默认就是这个

1.4 背景重复

解释：一般需要使用no-repeat这个属性

选项	说明
repeat	水平、垂直重复
repeat-x	水平重复
repeat-y	垂直重复
no-repeat	不重复
space	背景图片对称均匀分布

代码：background-repeat:repeat;//默认就是这个

1.5 背景滚动

解释：使用背景固定可以实现一种很好看的效果

选项	说明
scroll	背景滚动
fixed	背景固定

代码：background-attachment: scroll;// 默认就是这个

1.6 背景位置

解释：原理是盒子不动，背景图片在背后移动（默认图片显示在左上角），相当于在盒子里面展示出露出来的内容；使用用处很大，可以布局图片显示，还可以把好多小图标放一个图片里面改变背景位置显示不同图标

选项	说明
left	左对齐
right	右对齐
center	居中对齐
top	顶端对齐
bottom	底部对齐
x y	负值表示向右向下，正值表示向左向上

代码：background-position: center;background-position: 0 90px;// 水平 和 竖直

1.7 背景尺寸

解释：背景尺寸设置，默认图片按其大小只显示左上角（根据盒子大小显示）

选项	说明
cover	保持图像的纵横比并将图片缩放一部分，保证能填充满盒子，可能不会完整展示
contain	保持图像的纵横比并将图片缩放保证能完整展示，可能会没有填充满整个盒子
x(宽 ) y(高)	设置尺寸（可能会改变纵横比）
50px auto	auto可以根据另一项设置的尺寸，保证auto所在这项与另一项尺寸想对应（即保持纵横比）

代码：background-size: 100% 100%;//改变纵横比全填充进去;background-size:cover;

2.盒子阴影

解释：参数分别为水平偏移,垂直偏移,模糊度,颜色
代码：box-shadow: 10px 10px 5px rgba(100, 100, 100, .5);

3.颜色渐变

解释：代码主要为linear-gradient(red, green);用的比较少，可以自行查询资料