css样式扩充

border-radius : 

                削圆角   可以跟四个角 要削角的像素值    左上开始顺时针转   border-radius: 10px 20px 30px 40px;

                每个角都有一个水平半径和垂直半径    border-radius:  100px/50px;水平半径/垂直半径

box-shadow:

                  属性值:      x方向偏移     y方向偏移     阴影发散度 (模糊度)      阴影宽度     阴影颜色

                  阴影可以设置多组值,用逗号隔开

background:背景设置

                background-origin 设置第一张背景图片开始铺的位置   border-box从边框开始 padding-box  content-box

              background-clip背景裁切     属性值同于上者

              background-size: 设置背景图的尺寸

              -webkit-mask-image: url(路径)  背景蒙版 可设置是否平铺  size    -webkit-是兼容性写法

              background:linear-gradient(to left,red,orange,yellow,#00ff00,cyan, blue,purple);

                线性渐变:   方向,颜色至少两个(可以加渐变位置,用小括号写到颜色后边),    可以写多个

              radial-gradient:径向渐变 (半径 形状 at 圆心位置,颜色1(渐变位置),颜色2,....)

                                            1,circle:圆 2,ellipse:椭圆形

box-reflect:倒影,有三个参数

参数一:用来设置倒影所在的位置分为left right below above四个方位

参数二:设置倒影与元素之间的距离

参数三:设置倒影上的蒙版,可以是图片也可是渐变

-webkit-box-reflect: right 10px  linear-gradient(to right,yellow,rgba(0,0,0,0));