CSS3中，也新增了一些關于用戶界面的屬性，這些屬性可以重設元素或者盒子的尺寸、輪廓等等。

新增的部分屬性的瀏覽器支持情況

屬性瀏覽器支持

resize	IE	Firefox	Chrome	Safari	Opera
box-sizing	IE	Firefox(-moz-)	Chrome	Safari	Opera
outline-offset	IE	Firefox	Chrome	Safari	Opera

注：

• 目前的主流瀏覽器對新增的屬性的支持效果不是很理想，定義這些屬性時要特別注意。

新增的屬性以及描述：

屬性描述

appearance	改變元素的外觀等
box-sizing	允許某一種方式定義適應某個區域的具體內容。
icon	為創作者提供使用圖標化等價物來設置元素樣式的能力(目前瀏覽器都不支持)
nav-down	在使用 arrow-down 導航鍵時向何處導航。
nav-index	定義元素的 tab 鍵控制次序。
nav-left	在使用 arrow-left 導航鍵時向何處導航。
nav-right	在使用 arrow-right 導航鍵時向何處導航。
nav-up	在使用 arrow-up 導航鍵時向何處導航。
outline-offset	對輪廓進行偏移，并在超出邊框邊緣的位置繪制輪廓。
resize	是否可由用戶對元素的尺寸進行調整。

定義resize屬性后，元素的元素的大小就可以有用戶進行調整，格式為：

resize: none|both|horizontal|vertical;

注：none是用戶無法調整元素的大小，both是用戶可以調整元素的高寬，horizontal是用戶可以調整元素的寬度，vertical是用戶可以調整元素的高度。

用戶可以自己調整大小

box-sizing屬性主要是為了解決在IE6以前版本的瀏覽器對盒子的高寬解析包括border和padding，而其他瀏覽器解析盒子的高寬時不包括border和padding的問題。

定義box-sizing格式：

box-sizing: content-box|border-box|inherit;

box-sizing各個屬性值的意義：

值描述事例

content-box	標準盒子屬性，元素的寬度=width + border + padding，即padding和border不被包含在定義的width和height之內。	*{ box-sizing:border-box; width:200px; padding:10px; border:15px solid #eee; }
border-box	怪異盒子屬性，元素的寬度=width，即padding和border被包含在定義的width和height之內。	*{ box-sizing:border-box; width:200px; padding:10px; border:15px solid #eee; }
inherit	從父元素繼承 box-sizing 屬性的值。	?

border-box屬性值的效果：

左半部分 右半部分

而同樣的CSS樣式代碼，將box-sizing的屬性定義為content-box的效果：

左半部分 右半部分

outline-offset是設置或檢索對象外的線條輪廓偏移容器的值，格式為：

outline-offset: <length>|inherit;

<length>： 用長度值來定義輪廓偏移，且允許負值 。

inherit：從父元素繼承 outline-offset 屬性的值。

*{width:220px;padding:10px;outline:1px dashed #333;outline-offset:4px;border:3px solid #333;}

轉載于:https://www.cnblogs.com/lonzhe/p/3935112.html

總結

以上是生活随笔為你收集整理的CSS自学笔记（16）:CSS3 用户界面的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。