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
