CSS3教程-使用者介面

Hello！前端開發的小夥伴們，感謝你們一直陪伴我，今天這篇CSS3教程-使用者介面呢，是css3教程的最後一篇文章呢，希望大家可以學到真正實用的東西。

CSS3為網站介面重新提供了獨特的渲染屬性，本文為大家詳細介紹。

CSS3 使用者介面：

在 CSS3 中，新的使用者介面特性包括重設元素尺寸、盒尺寸以及輪廓等。

在本章中，您將學到以下使用者介面屬性：

1、resize；

2、box-sizing；

3、outline-offset。

瀏覽器支援：

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

Internet Explorer、Chrome、Safari 以及 Opera 支援 box-sizing 屬性。Firefox 需要首碼 -moz-。

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

CSS3 Resizing：

在 CSS3，resize 屬性規定是否可由使用者調整元素尺寸。

CSS 代碼如下：

執行個體：

規定 p 元素可由使用者調整大小：

p{resize:both;overflow:auto;}

CSS3 Box Sizing：

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

執行個體：

規定兩個並排的帶邊框方框：

p{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 屬性對輪廓進行位移，並在超出邊框邊緣的位置繪製輪廓。

輪廓與邊框有兩點不同：

1、輪廓不佔用空間；

2、輪廓可能是非矩形。

CSS 代碼如下：

執行個體：

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

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

新的使用者介面屬性：

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

以上就是CSS3教程-使用者介面的內容，更多相關內容請關注topic.alibabacloud.com（www.php.cn）！

