涉及背景的css属性有：background，background-clip，background-position，background-origin，background-image，background-size,background-attachment
涉及边框的css属性有：box-shadow，outline，border，border-image
针对以上属性，可以灵活的实现一些酷炫的效果，同时也可以对这些属性深入理解
背景
-
background
该属性是一个背景的简写属性，包括
color,image,origin,size,repeat,clip,position,attachment默认情况下，背景会延伸到边框所在的区域下层，如下样式，即使边框设置成白色透明，但是其底色还是呈现为蓝色
{ background: #58a; border: 10px solid hlsa(0, 0%, 100%, .5); }
这是由background-clip属性决定的，其默认值为border-box，所以背景在裁剪的时候会裁剪到边框，下面会详细讲解这个属性。
同时，background-repeat也会影响，如果设置为no-repeat，那么背景不会扩散到边框上
background: linear-gradient(red, blue) left top/50% 50% repeat-x
上面的样式，只有水平方向才会有背景色，垂直方向没有
background: linear-gradient(red, blue) left top/50% 50% no-repeat
设置成no-repeat后，边框没有背景色
设置多层背景
使用逗号分隔每个背景层，可以指定多个背景
backgroun: url() no-repeat, linear-gradiant();
语法
在使用background指定多个属性是，有以下规则
-
以下值可能出现0次或者1次
- attachment
- image
- position
- size
- repeat
-
size只能紧接着position出现，以“/”分隔，如：
"center/80%"、"left top/ 50% 50%" -
color只能被包含在最后一个属性，因为整个元素只有一个背景颜色
background: linear-gradient(red, blue) left top/50% 50% no-repeat,
linear-gradient(pink, brown) right bottom/50% 50% no-repeat;
-
background-clip
该属性设置背景色裁剪的范围，默认是到边框
有四个值：
- border-box（默认值）
- padding-box
- content-box
- text（实验性的API），在Chrome上使用需要添加上前缀：-webkit-background-clip: text
color: transparent; font-size: 20px; background: linear-gradient(pink, brown); -webkit-background-clip: text;
-
background-position
该属性设置图片初始位置，而这个位置是相对于由background-origin定义的位置图层，默认值为0,0
值：
- 关键字
top,right,bottom,left中的一个。用来指定把这个项目放在哪一个边缘。另外一个维度设置成50%。所以这个项目被放在指定边缘的中间位置
background: linear-gradient(pink, brown) no-repeat; background-size: 50% 50%; background-position: left; - 关键字
- 对于多图片背景，可以用逗号隔开，分别对应想要的背景
background: linear-gradient(pink, brown) no-repeat, linear-gradient(rgb(92, 103, 204), rgb(97, 196, 31)) no-repeat;
background-size: 50% 50%;
background-position: left, top;
- 值或百分比，指定背景相对于x轴，y轴的偏移量
background: linear-gradient(pink, brown) no-repeat;
background-size: 50% 50%;
background-position: 20% 30%;
-
边缘偏移量，只能同时设置right/top, bottom， 或者left/top,bottom
background: linear-gradient(pink, brown) no-repeat; background-size: 50% 50%; background-position: right 30%, top 50%;
`background-position: right 30%, left50%`，这样设置是无效的
-
background-origin
该属性指定背景图片background-image属性的原点位置的背景相对区域
当使用background-attachment为fixed时，该属性将被忽略不起作用
有三个值：
- border-box
border: 10px solid rgba(0, 0, 0, .2); padding: 10px; background: linear-gradient(pink, brown) no-repeat; background-size: 50% 50%; background-position: left; background-origin: border-box;
-
padding-box
border: 10px solid rgba(0, 0, 0, .2); padding: 10px; background: linear-gradient(pink, brown) no-repeat; background-size: 50% 50%; background-position: left; background-origin: border-box;
- content-box
border: 10px solid rgba(0, 0, 0, .2);
padding: 10px;
background: linear-gradient(pink, brown) no-repeat;
background-size: 50% 50%;
background-position: left;
background-origin: content-box;
-
background-image
该属性用于为一个元素设置一个或者多个背景图片（用逗号隔开）
背景图片可以是url引用的一张图片，也可以是通过渐变函数生成的
在绘制时，图像以z方向堆叠的方式进行。先指定的图像会在之后指定的图像上面绘制。因此指定的第一个图像“最接近客户”。
元素的边框border会在它们之上被绘制，而background-color会在它们之下绘制
-
background-size
该属性设置背景图片的大小
值
-
关键字：
cover缩放背景图片以完全覆盖背景区，可能背景图片部分看不见；contain缩放背景图片以完全装入背景区，可能背景区部分空白。cover
background-image: url('./hand.jpg'); background-repeat: no-repeat; background-size: contain;
-
```css
background-image: url('./hand.jpg');
background-repeat: no-repeat;
background-size: cover;
```
-
一个值：指定图片的宽度，高度为auto
background-image: url('./hand.jpg'); background-repeat: no-repeat; background-size: 50%;
-
两个值：指定图片的宽度和高度
background-image: url('./hand.jpg'); background-repeat: no-repeat; background-size: 50% 100%;
-
逗号分隔多个值：设置多重背景
background-image: url('./hand.jpg'), url('./hand.jpg'); background-repeat: no-repeat; background-position: left, right; background-size: 50% 50%, 25% 25%;
-
background-attachment
该属性决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动
一共有三个值
-
scroll
此关键属性值表示背景相对于元素本身固定， 而不是随着它的内容滚动（对元素边框是有效的）
-
fixed
此关键属性值表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动
-
local
此关键属性值表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动， 并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框
scroll VS local
对于这两个属性值，可能会有些分不清它们到底是什么关系，下面举个例子来进行说明
什么是相对于元素本身？什么又是相对于元素内容本身？
相对于元素本身：就是依附在该背景图片的元素上，和这个元素包含的内容无关
相对于元素内容本身：如果该背景图片的元素的内容的高度或宽度没有超出元素，就没什么区别；如果超过了，实际上元素内容的高度会比元素本身要高，那么相对于元素内容本身的中间位置和元素本身的中间位置就不一样了；可以这样想，元素内容自己也形成了一个虚拟盒子，这个盒子有可能比元素要大，但不会比元素小，内容不足时，该虚拟盒子的大小和元素一样。一旦大过元素本身，如果元素的overflow设置为auto，那么元素就会出现滚动条。
由此就可以知道这两个属性值的区别了，scroll是实实在在依附在元素上的，而local是依附在元素内容所形成的虚拟盒子上的，看下面的例子
页面结构
<div id="wrapper"><div> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> </div></div>样式设置
#wrapper { width: 100px; height: 500px; margin: 100px; overflow: auto; border: 1px solid black; } #wrapper div { height: 700px; overflow: auto; background-image: url('./hand.jpg'); background-repeat: no-repeat; background-position: left; background-size: 50px 50px; background-attachment: local; }当内层div的内容（li）所形成的虚拟盒子高度没有超过该内层div的高度，那么local和scroll效果是一样的
-
如果内容高度超过了，那么内容div就会出现滚动条，这时，local会让背景图片相对于内容形成的虚拟盒子的高度来进行定位，并随着内容的滚动而滚动
增加li元素
可以看到，背景图片是相对于元素的所有内容所形成的虚拟盒子进行定位，是位于虚拟盒子高度的中间，而不是元素高度的中间
内层滚动条滚动时，背景图片也会跟着一起滚动
当设置为scroll时，背景图片就不会跟着一起滚动，只会跟着外层滚动条一起滚动
边框
-
border
该属性可以用于设置一个或多个一下属性的值：
border-width，border-style，border-color -
border-image
该属性设置边框的背景图像
它会把应用的图片裁剪成九份，类似于九宫格，然后在贴到元素边框上
它是以下属性的简写
-
border-image-source: none
-
border-image-slice: 100%
图片裁剪位置
值
- 数值，没有单位的话，默认是px
- 百分比
- 裁剪特性，方向符合css普遍的方位规则，上右下左，如30% 35% 40% 30%，具体裁剪的规则参考下图
-
裁剪之后形成了九个分离的区域，然后按照对应的方式进行边框的填充
-
border-image-width: 1
-
border-image-outset: 0
-
border-image-repeat: stretch 假设有一张图片用作背景图
设置边框背景的重复方式，有三个值
- stretch：拉伸图片以填充边框
border: 30px solid red; border-image: url('./hand.jpg') 33% 33%; border-image-repeat: stretch;
- repeat：平铺图片以填充边框
- round：平铺图像。当不能整数次平铺时，根据情况放大或缩小图像
- space：平铺图像 。当不能整数次平铺时，会用空白间隙填充在图像周围
-
box-shadow
该属性用于在元素的框架上添加阴影效果。
可以设置多层阴影，用逗号将它们隔开
值
- inset：如果没有指定inset，默认阴影在边框外
- offset-x/offset-y：设置阴影偏移量
- blur-radius：模糊面积大小
- spread-radius：阴影大小，可以为负值
- color：阴影颜色
多层阴影
box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;
！注意
①box-shadow是层层叠加的，第一层投影位于最顶层。因此，需按此规律调整扩张半径，比如上述例子，想在外圈加一道5px的外框，则其半径值需设为15px
②投影的行为跟边框不完全一致，因为他不会影响布局，而且也不会受到box-sizing的影响
③通过这种方式创建的“外框”，出现在元素的外圈。并不会响应鼠标事件。如果需要响应，则可以给box-shadow属性加上inset关键字
-
outline
该属性用于绘制元素周围的一条线
它是一下三个属性的缩写
outline-color，outline-style，outline-width
需要注意的是
1、它总是会保卫整个元素，无法单独设置某便的outline
2、它不属于盒模型的一部分，所以也就不会影响元素的布局
-
outline-offset
该属性用于设置outline与一个元素或边框之间的间隙
可以是负值，负值将轮廓绘制在元素之内
box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink; outline: #58a 10px dotted; outline-offset: -10px;
