CSS3的一些属性（一）
一、box-shadow(阴影)二、border属性
一、box-shadow(阴影)
1、格式：inset/outset 水平偏移量 垂直偏移量 模糊范围 传播距离 阴影颜色；
inset（内阴影，必写）outset（外阴影，可不写） 模糊范围（阴影的模糊值）：阴影的大小是基于原来的位置向两侧同时模糊 传播距离：在水平方向和垂直方向同时增加阴影的大小
2、哪个阴影最先设置的，哪个阴影就在逻辑的最上面。 阴影是在文字的下面，在背景颜色的上面
小练习1：
效果如下，具体每个边框想设置什么自己可以随意改，此处只是用来练练手，学会怎么使用这个属性 小练习2：
效果如下 小练习3：
效果图 小练习4：当你鼠标移入正方形是，正方形出现阴影并变大，移出之后又恢复，中间都有个过渡的时间
二、border属性
1、border-radius属性 里面有四个值：top-left、top-right、bottom-right、bottom-left 也可以是三个值：top-left、top-right和bottom-left、bottom-right 还可以是两个值：top-left和bottom-right、top-right和bottom-left
border-top-right-radius:300px（水平） 300px（垂直）;和border-top-right-radius:300px;样式相同，可以改变水平和竖直方向的大小而改变形状 放在正方形中时，得到一个四分之一的圆，不同的图形中展现的效果不同
2、border-image属性 2.1格式：border-image-source | [ border-image-slice,border-image-width,border-image-outset] | border-image-repet; 一般建议分开写，有利于维护和开发，便于记忆。 连在一起我们一般都是border-image:source slice repeat; 其他的都是分开写
border-image-source:：使用绝对或相对地址( url() )或者创建渐变色linear-gradient(red, yellow)来确定图像。
border-image-slice(能添四个值，不可带px，只能写纯数字) 该属性指定从上，右，下，左 4 个方位来分割图像，将图像分成4个角，4条边和中间区域共9份，中间区域始终是透明的（即没图像填充），除非加上关键字fill。
border-image-outset：边框图像向外偏移的距离
border-image-width：设置body里面能显示的图片背景的宽度，它的默认值是1，所以该属性的计算值会是1 * border-width，相当于会直接使用border-width的定义。 特殊点：如果添的是auto，那么它会向slice看齐，取slice的值+px。
border-image-repeat：[ stretch（默认值） | repeat | round | space ]，可以一次添两个参数 stretch：将被分割的图像使用拉伸的方式来填充满边框图像区域。 repeat：将被分割的图像使用重复平铺的方式来填充满边框图像区域。当图像碰到边界时，如果超过则被截断。 round：与 repeat 关键字类似。不同在于，当背景图像不能满足被新增一个块时，会根据情况缩放图像。（先拉伸再平铺或者先压缩再平铺） space：与 repeat 关键字类似。不同在于，当背景图像不能以整数次平铺时，会用空白间隙填充在图像周围。（会用空白间隙填充在图像周围再平铺）