盒模型

盒模型陰影

Box-shadow:[inset] x y blur [spread] color

參數inset:投影方式不寫這個參數就是外投影

Inset內投影

X,y陰影的偏移

Blur模糊半徑

Spread:擴展陰影的半徑

實例：

Box-shadow:0 30px 30px #000,inset 0 0 10px #ccc;

盒模型倒影

Box-reflect倒影

Direction方向 above/below/left.right

距離

漸變（可選）

示例：box-reflectright 10px linear-gradient(red 0,blue 100%);

漸變

  在background中使用

  示例：

Background：-webkit-linear-gradient（transparent 0，blue 100%）從透明漸變 成藍色

Resize自由縮放（自由縮放要與overflow：auto配合使用）經過鼠標的拖拉進行放大或縮小

Both水平垂直均可以縮放

Horizontal只有水平方向能夠縮放

Vertical只有垂直方向能夠縮放

Box-sizing盒模型解析模式

Content-box標準盒模型（默認）

普通型

Border-box怪異盒模型只包括寬高

Css3分欄佈局（新聞報形式）

Column-width欄目寬度

Column-count欄目列數

Column-gap欄目距離

Column-rule欄目間隔線

響應式佈局（媒體查詢）

判斷橫豎屏

Media=「all and（orientation：portrait）」

Media=「all and（orientation：landscape）」

 

方法1：

經過引入文件來進行

<link rel=」stylesheet」 type=」text/css」 href=」stylea.css」 media=」screen and (min-width:400px) and (max-width:800px)」>

方法2：

經過直接在style中寫

@media screen and(min-width:400px) and (max-width:800px){

Margin:0 auto}

方法3：

經過js寫

判斷瀏覽器的寬度來改變樣式