CSS3新增特性-border

border相关特性

1. border-radius：设置边框圆角，单位有px，%，em
   1. 参数为一个

      .box {
      	border-radius: 50px;
      }
      

                    相当于设置方向

   2.  参数写全

      .box {
          border-radius: 50px 20px 30px 40px /50% 50% 50% 50%;
      }

      参数前面四个代表水平半径，"/"后面是垂直半径  

   3. 可以分开写border-top-left-radius

      .box {
          border-top-left-radius: 50%;
          border-top-right-radius: 20px 90px;
          border-bottom-right-radius: 40px 60%;
          border-bottom-left-radius: 50px 50%;
      }

      前面代表水平半径，后面代表垂直半径（*每个角单独设置都是互相不会影响的，可能由于视觉错误感觉修改一个角之后前面的角变了orz*）；垂直半径可以省略，则默认垂直半径和水平半径相等

      ---

2. border-image 分割图片来设置border       

   border-image: source slice width outset repeat|initial|inherit;

   .box {
       /*新版谷歌浏览器必须先这样设置border，才能显示border-image*/
       border: 10px solid transparent;
       border-image: url("./border.png") 10 10% 10 10% round repeat;
   }

   注意**：参数一：表示切割的线，依次为top right bottom left切割为一个九宫格；10默认就是10px，不可以加单位；四个参数可以省略写法；如果加上第五个值fill，则中间区域也会填充进盒子内容区域；    参数二：最多写两个，可写一个，stretch-拉伸               repeat-重复                   round-平滑的重复

   1. border-image-width：指定border的宽度，同样只能是数值不能加单位

   2. border-image-outset：指定边框距离内容的宽度，加px单位，如果不加代表相对于边框宽度的倍数

      ---

3. box-shadow：盒子阴影（虽然和边框没什么关系，但是看起来类似边框，就一起总结了）

   .box {
       box-shadow: inset 2px 2px 30px 3px #000;
   }

   参数依次为：设置为内阴影，省略为外阴影   x轴偏移   y轴偏移   阴影模糊程度，越大越模糊   阴影的大小，设置为0，和盒子一样大    阴影的颜色     

4.  完成一个如图所示的瓶酒瓶 

   .box {
       border-radius: 50%;
       background-color: green;
       box-shadow: inset 0 0 25px 8px #000;
       position: relative;
   }
   .box::before {
       display: block;
       content: "";
       position: absolute;
       width: 150px;
       height: 150px;
       border-radius: 50%;
       left: 0;
       top: 0;
       box-shadow: 5px 21px 100px -5px #000;
   }