整理一下以前學習的Html+css3複習筆記

一、html5新特性

 常用語意標籤:nav footer header section mark

 功能標籤 video audio iframe canvas(畫布與繪圖功能)

 input新type:url/number/range/Date(date, month, week, ti​​me等)/search/color   

二、css3

 1 邊框

 border-radius:不同的賦值方法;

 box-shadow:10px 10px 5px red;

 border-image:賦值內容;

  border-image-source 用在邊框的圖片的路徑。 

  border-image-slice 圖片邊框向內偏移。 

  border-image-width 圖片邊框的寬度。 

  border-image-outset 邊框影像區域超出邊框的量。 

  border-image-repeat 

    影像邊框是否應平鋪(repeated)、鋪滿(rounded)或拉伸(stretched)。

 備註:IE9+支援border-radius 和 box-shadow。

   IE11, Firefox, Opera 15, Chrome 以及 Safari 6 支援border-image 屬性。

2 文

 text-shadow:5px 5px 5px yellow;(每個位置表示的意思)

 3 字體 引入其他字體

 @font-face的使用方法

@font-face{

     font-family:"巴札黑";

       src: url(陳代明粉筆體試煉版2.otf);

}

 4 動畫

 transform:translate(px)/rotate(deg)/scale(deg)/scale(

 備註:IE10、Firefox 以及 Opera 支援 transform 屬性

  Chrome 和 Safari 需要前綴 -webkit-         Internet Explorer 9 需要前綴 -ms-

 5 動畫3D

 transform-origin 允許你改變被轉換元素的位置。 賦值需掌握 關鍵字!

transform-origin: x-axis y-axis z-axis;           //   x-axis 定義視圖置於 X 軸的何處。可能的值：

transform-style 規定被嵌套元素如何在 3D 空間中顯示!!! 

 perspective 透視點 !!!

 backface-visibility 定義元素在不面對螢幕時是否可見

backface-visibility: hidden;

 

6 過度transition

 

 備註:

 

 IE10、Firefox、Chrome 以及 Opera 支援 transition 屬性。

 

 Safari 需要前綴 -webkit-。

 

 註釋：IE9 以及更早的版本，不支援 transition 屬性。

 

 

 transition 簡寫屬性，用於在一個屬性中設定四個過渡屬性。 

 

 transition-property 規定應用過渡的 CSS 屬性的名稱。 

 

 transition-duration 定義過渡效果所花費的時間。預設是 0。 

 

 transition-timing-function 規定過渡效果的時間曲線。預設是 "ease"。      不同的屬性值需要知道.

 

 transition-delay 規定過渡效果何時開始。預設是 0。 

 

7 張動畫

 

eg: 

@keyframes myfirst

 

  {

 

   from {background: red;}

 

   to {background: yellow;}

 

  }

 

 8 串流版面 媒體查詢 響應式

 

 流式佈局:百分比佈局, 所有尺寸參考父級 其中margin和padding特殊 參考寬度

 

 媒體查詢 @media screen () and ()   響應式: viewport 統一寫法

 

 實例注意：

 

text-shadow 

 

水平陰影、垂直陰影、模糊距離，以及陰影的顏色

 

text-shadow: 5px 5px 5px #FF0000;

 

 

 

box-shadow屬性適用於盒子陰影

 

box-shadow: h-shadow y-shadow blur spread color inset;

 

水平陰影的位置 垂直陰影的位置 模糊距離 陰影的大小 陰影的顏色  從外層的陰影（開始時）改變陰影內側陰影

 

div{box-shadow: 10px 10px 5px #888888;} 

 

transform-origin: x-axis y-axis z-axis;   x-axis 視圖被置於 X 軸定義視圖的何處。

 

 

 

多列

 

column-count:n;

 

column-gap:10px;間距

 

column-rule: 2px solid red;  //相當於border 分隔線

 

 

resize: none|both|horizo​​ntal|vertical;

 

horizo​​ntal 使用者可調整元素的寬度。

 

vertical 使用者可調整元素的高度。

 

div{resize:both;

 

overflow:auto;

 

}