1. <tbody id="2rkzu"></tbody>
      <dd id="2rkzu"><noscript id="2rkzu"></noscript></dd>

      <th id="2rkzu"><pre id="2rkzu"></pre></th>

      <span id="2rkzu"><p id="2rkzu"></p></span>
      <rp id="2rkzu"></rp>

      <th id="2rkzu"><kbd id="2rkzu"></kbd></th>
      <rp id="2rkzu"><ruby id="2rkzu"></ruby></rp>
      <th id="2rkzu"><pre id="2rkzu"></pre></th>

      第1章 第12節 CSS3 用戶界面

      推薦給朋友

      CSS3 用戶界面

      CSS3 用戶界面

      在 CSS3 中,新的用戶界面特性包括重設元素尺寸、盒尺寸以及輪廓等。

      在本章中,您將學到以下用戶界面屬性:

      • resize
      • box-sizing
      • outline-offset

      瀏覽器支持

      Firefox、Chrome 以及 Safari 支持 resize 屬性。

      Internet Explorer、Chrome、Safari 以及 Opera 支持 box-sizing 屬性。Firefox 需要前綴 -moz-。

      所有主流瀏覽器都支持 outline-offset 屬性,除了 Internet Explorer。

      CSS3 Resizing

      在 CSS3,resize 屬性規定是否可由用戶調整元素尺寸。

      這個 div 元素可由用戶調整尺寸(在 Firefox 4+、Chrome 以及 Safari 中)。

      CSS 代碼如下:

      實例

      規定 div 元素可由用戶調整大小:

      div
      {
      resize:both;
      overflow:auto;
      }
      

      CSS3 Box Sizing

      box-sizing 屬性允許您以確切的方式定義適應某個區域的具體內容。

      實例

      規定兩個并排的帶邊框方框:

      div
      {
      box-sizing:border-box;
      -moz-box-sizing:border-box;	/* Firefox */
      -webkit-box-sizing:border-box;	/* Safari */
      width:50%;
      float:left;
      }
      

      CSS3 Outline Offset

      outline-offset 屬性對輪廓進行偏移,并在超出邊框邊緣的位置繪制輪廓。

      輪廓與邊框有兩點不同:

      • 輪廓不占用空間
      • 輪廓可能是非矩形

      這個 div 在邊框之外 15 像素處有一個輪廓。

      CSS 代碼如下:

      實例

      規定邊框邊緣之外 15 像素處的輪廓:

      div
      {
      border:2px solid black;
      outline:2px solid red;
      outline-offset:15px;
      }
      

      新的用戶界面屬性

      下面的表格列出了所有的轉換屬性:

      屬性 描述 CSS
      appearance 允許您將元素設置為標準用戶界面元素的外觀 3
      box-sizing 允許您以確切的方式定義適應某個區域的具體內容。 3
      icon 為創作者提供使用圖標化等價物來設置元素樣式的能力。 3
      nav-down 規定在使用 arrow-down 導航鍵時向何處導航。 3
      nav-index 設置元素的 tab 鍵控制次序。 3
      nav-left 規定在使用 arrow-left 導航鍵時向何處導航。 3
      nav-right 規定在使用 arrow-right 導航鍵時向何處導航。 3
      nav-up 規定在使用 arrow-up 導航鍵時向何處導航。 3
      outline-offset 對輪廓進行偏移,并在超出邊框邊緣的位置繪制輪廓。 3
      resize 規定是否可由用戶對元素的尺寸進行調整。 3
      澳门赌场真钱