1 边框

1.1圆角 主要写法border-radius,如下图,举几个例子

屏幕快照 2016-04-09 下午7.17.00.png

未加边框的,下面是加上边框的效果

---

屏幕快照 2016-04-09 下午7.18.58.png

这个就是给div的4个角都加了圆角,也可以只给其中几个角加,可以写数值,也可以写百分比, 写法如下

"border-top-left"这是给左上角加圆角

"border-top-right"这是给右上角加圆角

"border-bottom-left"这是给左下角加圆角

"border-bottom-right"这是给右下角加圆角

注意如果要做一个椭圆,最好是写百分比,那样效果比较好.一般写法如下

"border-radius:100%;"椭圆的宽高是不一样的!!!

---

1.2阴影 主要写法box-shadow,如下图

屏幕快照 2016-04-09 下午7.35.54.png

box-shadow后面第一个值是x轴方向的偏移量,第二个是y轴方向的偏移量,第三个是模糊度 ,偏移量可以为负值,亦可以设置多个,中间用逗号隔开.

---

还有一个内阴影效果,写法是inset ,效果如下图

屏幕快照 2016-04-09 下午7.41.34.png

---

1.3文字阴影 主要写法是text-shadow,如下图

屏幕快照 2016-04-09 下午7.49.29.png

text-shadow后面接的值与box-shadow后面接的一样,但是没有内阴影

---

2背景

2.1背景裁剪 写法是background-clip,

clip裁剪一共有三个值

        #border-box图片渲染在border里面
        #padding-box图片渲染在padding里面
        #content-box图片渲染在content里面

border-box举例如下图

屏幕快照 2016-04-09 下午8.04.12.png

---

padding-box举例如下图

屏幕快照 2016-04-09 下午8.09.07.png

---

content-box举例如下图

屏幕快照 2016-04-09 下午8.11.44.png

---

2.2背景图片的起始位置,写法是background-origin,

origin起点位置,一共有三个值

      #border-box图片从border的位置开始,一直延伸,直到边框
      #padding-box图片从padding的位置开始,一直延伸,直到边框
      #content-box图片从content的位置开始,一直延伸,直到边框

border-box举例如下

屏幕快照 2016-04-09 下午8.24.07.png

---

padding-box举例如下

屏幕快照 2016-04-09 下午8.26.11.png

---

content-box举例如下

屏幕快照 2016-04-09 下午8.27.26.png

---

2.3背景图片的大小,写法background-size

几个特性

       #lenght长度值指定,一般是直接写数值
       #percentage百分比指定,一般是直接百分比
       #auto真实大小,显示图片的真实大小
       #cover等比例缩放到完全覆盖容器，背景图像有可能超出容                                                                  
       #contain将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内

---

lenght举例如下图

屏幕快照 2016-04-09 下午8.47.44.png

---

percentage举例如下

屏幕快照 2016-04-09 下午8.49.47.png

---

auto举例如下

屏幕快照 2016-04-09 下午8.51.34.png

---

cover举例如下

屏幕快照 2016-04-09 下午8.53.08.png

注意cover和auto这两个是有点区别的

---

contain举例如下

屏幕快照 2016-04-09 下午8.56.11.png

---

属性大致讲完了,还有一点就是蒙版的问题,这个后面再写点