CSS3边框图片、边框阴影、文本阴影

边框图片border-image

其有五个属性：

border-image-source：边框图片的路径

border-image-slice：图片边框向内偏移

border-image-width：图片边框的宽度

border-image-outer：边框图片区域超出边框的量

border-image-repeat：图片边框的平铺状态，有三个参数平铺repeat、铺满round、拉伸stretched

复合写法：border-image：url slice width outer repeat；

用到的图片：

效果图：

1、repeat

2、round

3、stretch

边框阴影box-shadow

其有六个属性：前两个是必需的，后四个可选

h-shadow：水平阴影的位置，允许负值

v-shadow：垂直阴影的位置，允许负值

blur：模糊距离

spread：阴影的尺寸

color：阴影的颜色

insert：将外部阴影改为内部阴影

复合写法：box-shadow：h-shadow v-shadow blur spread color insert；

注意：可以同时给多个，用逗号隔开即可

例如：box-shadow:50px 50px 30px 50px yellow,10px 10px 30px 10px skyblue inset;

效果图如下：

文字阴影text-shadow

其有四个属性：前两个必需，后两个可选

h-shadow：水平阴影的位置，允许负值

v-shadow：垂直阴影的距离，允许负值

blur：模糊距离

color：阴影的颜色

复合写法：text-shadow：h-shadow v-shadow blur color；

例如：text-shadow: 2px 2px 50px purple,2px 2px 3px pink,10px 20px 30px skyblue;

效果图如下：