利用css3的新特性,我們可以自由地控制頁面當中某個元素的大小,可以設定外邊框以突出重點，輕鬆地實現例如報紙版面的排列效果(多列),也可以重新定義盒子模型的呈現樣式。
想要在頁面上實現類似於報紙排版的樣式，使用column-count這一css3的新特性就可以輕鬆的完成了，當然，由於各瀏覽器存在相容性的問題，這一屬性在不同瀏覽器下也會有不同的宣告方式:
internet explorer 10 和 opera 支援多列屬性。
firefox 需要字首 -moz-。
chrome 和 safari 需要字首 -webkit-。
利用column-gap這一屬性，它規定了列之間的間隔，最好將這個屬性放在column-count之上，而且也需要各瀏覽器廠商的字首。
利用column-rule這一屬性，可以用來設定列之間的分隔線樣式，最好將這個屬性放在column-count之上，而且也需要各瀏覽器廠商的字首。
利用column-width這一屬性，可以用來規定列的寬度，但是在使用此屬性之前，一定要根據當前div容器的寬度來合理分配，最好將這個屬性放在column-count之上，而且也需要各瀏覽器廠商的字首。
下面是實現類似於報紙排版方式的乙個例子:
[html]view plain
copy
?>
<
html
lang
="zh-hans"
>
<
head
>
<
meta
name
="viewport"
content
="width=device-width,initial-scale=1.0"
>
<
meta
charset
="utf-8"
>
<
link
href
="jquery.mobile-1.4.2.min.css"
rel=
"stylesheet"
>
<
title
>
css 3使用者介面---demo01
title
>
head
>
<
body
>
<
divdata-role
="page"
data-theme
="b"
>
<
divdata-role
="header"
>
<
h1>
css 3使用者介面
h1>
div>
<
divdata-role
="content"
style
="column-count:3;-moz-column-count:3;-webkit-column-count:3;"
>
明日香是eva的女主角之一，第二適格者，eva二號機的專屬駕駛員。她是具有3/4德國血統和1/4日本血統的天才少女，國籍是美國。
自第八話登場後在與使徒的戰鬥中都非常活躍，駕駛技術相當優秀。第九話開始住進了美里的公寓，與真嗣、美里組成了三口之家。明日香是個看起來活潑開朗的女孩，在別人面前顯得非常高傲和強勢，因此，軟弱的真嗣經常招來她的不滿。但她也有著不堪回首的往事，她的母親因為一次試驗失敗而導致精神**，並最終在明日香眼前自殺。無法正視這一精神創傷的明日香因此將自己脆弱而沒有安全感的內心隱藏在好強的外表下，導致其人格具有極高的侵略性，只有透過對外表現她個人的優秀，才能確保心理上的平衡。
故事中期在同步率被真嗣超越，又數次敗給使徒的打擊之下精神瀕臨崩潰。但之後在劇場版《the end of evangelion》中，由於在eva二號機中見到母親的靈魂，她再次振作起來，和量產機
展開了慘烈的搏鬥。
div>
<
divdata-role
="footer"
data-position
="fixed"
>
<
h3>
css 3使用者介面
h3>
div>
div>
<
script
src=
"jquery/jquery.js"
>
script
>
<
script
src=
"jquery.mobile-1.4.2.min.js"
>
script
>
body
>
html
>
有時使用者可能需要自己來調整元素的尺寸，這時就可以使用resize屬性來完成這一需求。
它可以取以下值:none|無法調整,both|高度和寬度都可以調整,horizontal|只能對寬度進行調整,vertical|只能對高度進行調整
但是到目前為止，只有頁面中的textarea這一元素可以使用這一屬性。
接下來是box-sizing屬性，在css2中，一旦為盒模型設定了padding屬性，那盒子的整個寬高也會隨之被改變，但有時我們並不希望盒子的尺寸在加入此屬性後就會產生改變，
這時我們就可以使用box-sizing這一屬性來定義是否需要做出改變了，同樣的這個屬性也存在著瀏覽器相容性的問題。
internet explorer、opera 以及 chrome 支援 box-sizing 屬性。
firefox 支援替代的 -moz-box-sizing 屬性。
safari 支援替代的 -webkit-box-sizing 屬性。
box-sizing屬性可以取以下三個值:
content-box：css 2預設的寬度高度行為，寬和高分別應用到元素的內容框，在寬和高之外繪製元素的內邊距和邊框(內邊距指的就是盒子與包圍盒子的邊線之間的那段距離)。
border-box：為元素設定的寬度和高度決定了元素的邊框盒。
就是說，為元素指定的任何內邊距和邊框都將在已設定的寬
度和高度內進行繪製。
通過從已設定的寬度和高度分別減去邊框和內邊距才能得到
內容的寬度和高度。
inherit ：規定應從父元素繼承 box-sizing 屬性的值。
接下來是outline，外邊框屬性,這個屬性可以給元素的周圍繪製輪廓外邊框，而且這個外邊框不會通過設定乙個數值使邊框
邊緣的外圍偏移，可起到突出元素的作用。
現在所有主流瀏覽器都支援 outline 屬性，除了 internet explorer。
語法：outline：[outline-color] || [outline-style] || [outline-width] ||
[outline-offset] | inherit
： 指定輪廓邊框顏色。
： 指定輪廓邊框輪廓。
： 指定輪廓邊框寬度。
： 指定輪廓邊框偏移位置的數值。
以上提到的屬性都是css3使用者介面中常用的屬性。
CSS3新特性學習
最近發現很多css3的新特性不熟悉，所以今天把它們都學習一邊，做出效果加深印象，說到css3還加了蠻多的特性，像一些border的一些效果，動畫屬性animation trasiform等。效果 實現 height 100px width 100px margin 0 auto background...
CSS3新特性學習筆記
新選擇器 邊框 背景公升級 圓角 陰影 新的盒模型 漸變 動畫 2d3d轉換 伸縮布局 多列布局 新單位字首應用 瀏覽器相容 漸進增強 語法規則說明 表示全部可選項 表示多選一 代表多選一 代表出現0次或以上 代表出現1次或者以上 代表可選的，即出現0次或1次 代表出現a次 代表出現 a次以上b次以...
CSS3新特性學習（2）
1.2d轉換之移動translate 類似定位 1.語法 transform translate x,y transform translatex n transform translatey n 2.重點 1.定義2d轉換中的移動沿著x和y移動元素 2.translate最大的優點，不會影響到其他...