border-radius和border-image

        border-radius：一个值   5px  -->   四个角都是5px

                                 两个值   5px 10px  -->   左上、右下5px，    右上、左下10px

                                 三个值   5px 10px 15px   -->  左上5px，      右上、左下10px，    右下15px

                                 四个值   5px 10px 15px 20px  -->  左上5px，   右上10px，  右下15px，  左下20px

                                 带“/”       2px 5px 8px / 3px 6px

                                                相对于：border-top-left-radius：2px 3px；

                                                               border-top-right-radius：5px 6px；

                                                               border-bottom-right-radius：8px 3px；

                                                               border-bottom-left-radius：5px 6px；

        以上就是看文档得出的，其他的还好，“border-top-left-radius：2px 3px；”，1个参数还好理解，2个参数什么鬼？然后，百度百度

        好吧，搜百度一圈后，才发现，我一点都不理解

        圆角的实现原理：

                先来个简单的：border-top-left-radius：5px；

                实际上就是创建一个圆半径为5，然后将这个圆放到左上角，进行相切，红色部分就是去掉的部分

               

                那么两个值呢：border-top-left-radius：5px 10px；（如果是border-radius：5px 10px；就不一样了，看清楚了）

               

                就是椭圆的水平半径为5px，垂直半径为10px

        border-image：

                border-image-source：url("地址")；

                border-image-slice：A B C D      (数值不用单位或百分数)

                                                 距离上部A单位，距离右部B单位，距离底部C单位，距离左部D单位

               

                        简单来说就是画了4条线（a，b，c，d）（别管什么ABCD）

                        如果加上了fill，例如border-image-slice：A B C D fill，中间部分（5）作为背景填充进content

        border-image-repeat：这里操作的是1,2,3,4部分

                                             stretch stretch（默认，拉伸；repeat  重复     round   平铺）

        border-image-width：边框背景宽度

        boeder-image-outset：边框背景往外移动（3px或5，没单位就是倍数）

        注意：复合写法需要加前缀，单个写法不用