CSS(12) -- css3 新特性<2> 阴影&边框&背景一. 阴影 box-shadow 一般写法：一般不会去指

一. 阴影 box-shadow

box-shadow: 水平阴影的位置 垂直阴影的位置 模糊距离 阴影的大小 阴影的颜色 阴影开始方向（默认是从里往外，设置inset就是从外往里）;

一般写法：

box-shadow: 10px 10px 5px #888888;

一般不会去指定阴影的大小，因为一般默认都是与原元素一样大小

所以上述的 5px 指定的是模糊距离

   - 该值越大，阴影就越模糊，
   - 最小为 0 ，此时的阴影没有模糊的感觉，会是棱角分明的状态！！！
   - 默认值为 0

二. 边框 border

<1> 边框图片 border-image

border-image 通过指定一张图片来取替 border-style 定义的样式，但 border-image 生效的前提是： border-style 和 border-width 同时为有效值(即 border-style 不为 none，border-width 不为 0)。

有以下属性：

border-image-source指定图片的URL

border-image-slice指定4个值 + fill? (4条分割线：top, right, bottom, left)将 border-image-source 分割成9宫格，位于周围的一圈将来用于当作边框样式！！

当然，值也可以是百分比，即该线的位置占元素的比例！！
后面带关键字 fill 的话，就会把九宫格中间的部分当作要添加边框的元素的背景

border-image-width 字面意思是边框图片宽度，作用是将 DOM 节点分割成九宫格。

假设 border-image-slice 分割 border-image-source 的九宫格为A， border-image-width 分割 DOM 的九宫格为 B，A 与 B 的每个格子存在一一对应关系，具体如下：

border-image-repeat 字面意义是边框图片平铺。作用是指定 border-image 的平铺方式。。法上最多可接收两个参数，第一个参数指定水平方向边框的平铺方式，第二个参数指定垂直方向边框的平铺方式

四个值可以选择：

round
repeat
strech
space

注意：

round 与 repeat 的区别：round会凑整填充（进行了适度的拉伸）。repeat不进行拉伸，不凑整。
round 与 space 的区别：虽然都是凑整填充显示，但是 space 是在小方块之间有一定的空隙。

border-image-outset作用是把原来的贴图位置向外延伸.

border-image参考1

border-image详解2

<2> 边框圆角 border-radius

border-radius : 左上 右上 右下 左下

栗子

border-radius : 25px 0 25px 0

三. 背景 background

<1> background-clip

background-clip 用来指定背景绘制的开始区域，有三种值可以选择：border-box 从边框开始绘制（默认）；padding-box 从padding开始绘制，不包括边框，相当于把边框那部分背景给裁掉！content-box 只绘制内容部分！！

border-box

padding-box

content-box

<2> background-origin

background-position的参考点，是以 background-origin 为参考的！！也是有三个值：border-box： 原点为边框的左上角；padding-box： 原点为padding部分的左上角；content-box： 原点为内容部分的左上角！！

下面演示了三种情况，此时 background-position 都为 : 0px 0px

<3> background-size

background-size 指定背景大小

值为以下几个：

contain 在不裁剪或拉伸图像的情况下，在其容器内尽可能大地缩放图像。如果容器大于图像，这将导致图像平铺，除非该background-repeat属性设置为no-repeat。

cover 将图像缩放（同时保持其比例）到尽可能小的尺寸以填充容器（即：其高度和宽度完全覆盖容器），不留空白。如果背景的比例与元素不同，则图像将被垂直或水平裁剪。

width height 指定背景的宽高

percent 将相应尺寸的图像拉伸到背景定位区域的指定百分比。background-origin背景定位区域由（默认为padding box）的值决定

repeat-x 高度自适应，并且循环铺满

center 高度自适应，在中间

<4> 多张背景图片

div
{
    border:1px dashed black;
    padding:35px;
    background-size: contain;
    background:url('test.jpg') no-repeat left,url(logo.png) no-repeat right;
}

CSS(12) -- css3 新特性<2> 阴影&边框&背景