本篇文章介紹CSS3中增強用戶界面的關於溢出、縮放、輪廓、鼠標事件、文本選中等屬性的使用。這些屬性基本上得到了大部分瀏覽器的支持，可以在代碼中直接書寫。

承接文章：CSS3盒模型尺寸計算方法，box-sizing屬性的使用，你知道嗎？

技術等級：中級 | 適合有一定的CSS基礎的人士閱讀。

希望收藏了這篇文章的你同時也可以關注一下“小海前端”的頭條號，因為這些文章都是連載的，並且是經過系統的歸納和總結的。塌下心來認真閱讀，你一定會學到對你有用的知識。

CSS3所提供的增強用戶界面的屬性以及與此相關的屬性比較多，小海前端（頭條號）將分幾次對其進行講解。所包含的所有增強用戶界面的屬性包括：

• box-shadow

• box-sizing

• overflow-x

• overflow-y

• resize

• outline

• outline-width

• outline-style

• outline-color

• outline-offset

• pointer-events

• user-select

• appearance

• content

• counter-increment

• counter-reset

• quotes

本篇文章為大家講解上述粗體顯示的五組增強用戶界面屬性。

一、全新的溢出設置：

CSS3技術將原有的overflow屬性劃分為兩個方向的溢出屬性。

• overflow-x，設置水平方向的溢出解決方案。

• overflow-y，設置垂直方向的溢出解決方案。

這兩個屬性的取值和overflow屬性相同，可以取如下值：

• auto，自動，當發生溢出時，才出現滾動條。

• visible，溢出的部分依然可見。

• hiddle，溢出的部分隱藏。

• scroll，若發生溢出，則強制顯示滾動條。

如果小夥伴們有不熟悉overflow屬性的用法的，可以參看小海前端（頭條號）寫的《CSS三個重要的定位屬性，使用頻率超高，定位屬性詳解》一文。

二、任意元素都可以縮放：

什麼叫做元素縮放呢？我們來看小夥伴們都非常熟悉的表單元素：多行文本域。

<textarea name=”introduce” rows=”10” cols=”30”></textarea>

下圖為我們展示了多行文本域在Google Chrome瀏覽器中的外觀。

多行文本域自帶縮放調整功能

我們可以清晰地看出，在多行文本域的右下角有一個可以用來調整控件尺寸的位置圖標，用戶利用鼠標拖拽該圖標就可以改變多行文本域的顯示大小。

如果希望一個普通的塊級元素也具備該拖拽圖標，那應該怎麼解決呢？

CSS3提供了resize屬性來完成該功能。

CSS3技術使用resize屬性來設置對象是否具備縮放功能

該屬性可以取如下值：

• none，塊級元素不具備右下角拖拽圖標。

• horizontal，塊級元素具備只可以改變水平方向寬度的拖拽圖標。

• vertical，塊級元素具備只可以改變垂直方向高度的拖拽圖標。

• both，塊級元素具備可以同時改變寬度和高度的拖拽圖標。

1、該屬性使用時必須結合溢出屬性。

要想讓右下角的拖拽圖標生效，必須設置塊級元素的溢出屬性，並且溢出屬性的取值還不得為visible。

2、可以結合下列CSS3屬性來控制塊級元素拖拽的尺寸範圍。

• min-width，設置可拖拽範圍的最小寬度。

• max-width，設置可拖拽範圍的最大寬度。

• min-height，設置可拖拽範圍的最小高度。

• max-height，設置可拖拽範圍的最大高度。

讓我們通過一個簡單的實例來實現塊級元素的縮放效果。

例：在頁面中有一個<div></div>塊級元素,其id屬性取值為box，內部包含任意文本。設置該塊級元素的寬度為200像素，高度為200像素。通過CSS3設置要求該塊級元素能夠自由縮放，且寬度和高度不超過400像素。

CSS代碼如下所示：

#box{

width:200px; height:200px;

overflow:hidden;

resize:both;

max-width:400px;

max-height:400px;

}

三、元素本身的輪廓：

什麼是元素輪廓呢？我們來看小夥伴們都非常熟悉的表單元素：文本域。

<input type=”text” name=”nick” />

下圖為我們展示了文本域在Google Chrome瀏覽器中獲得鼠標焦點時的外觀。

文本框獲得焦點時顯示的對象輪廓

我們可以清晰地看出，當文本域獲得鼠標焦點時，在其邊框位置處又一圈淡藍色的線條對其進行包裹，這就是文本框的輪廓。

CSS3提供了outline及其派生屬性來調整元素的輪廓，其派生屬性包括：

• outline-width，設置元素的輪廓寬度。

• outline-color，設置元素的輪廓顏色。

• outline-style，設置元素的輪廓樣式。

除此之外，CSS3還提供了用來設置輪廓偏移的屬性：

loutline-offset，該屬性不是outline屬性的派生屬性，因此必須單獨使用。

屬性outline的取值格式如下所示：

outline:<outline-style> <outline-width> <outline-color>

要想去掉表單元素中自帶的輪廓屬性，可以設置outline屬性的取值為none。

input[type=text]:focus{

outline:none;

}

上段代碼設置當type屬性取值為text的<input />標記獲得鼠標焦點時，將其自帶的輪廓隱藏。

例：我們來為一個塊級元素設置輪廓效果。

#box{

outline:solid 1px #7a9cd3;

outline-offset:10px;

}

下圖為我們展示了上段CSS代碼中輪廓的效果。

輪廓線的偏移效果

默認情況下，輪廓會佔據邊框的位置。由於outline-offset屬性的設置，可以看出，輪廓從邊框位置向外偏移了10像素的距離。

四、對元素取消鼠標事件：

CSS3提供了一個名為pointer-events的屬性，用來設置對象不能成為鼠標事件的目標。

該屬性的取值較多，但是大部分取值主流瀏覽器尚不支持，當該屬性取值為none時，對象就不再是鼠標事件的目標了。

CSS3技術使用pointer-events屬性取值none來取消元素的鼠標事件

若設置了對象不再是鼠標的事件目標，則該對象上綁定的事件代碼將不再生效。鼠標單擊該對象時，這個鼠標動作會自動作用在該對象下方的對象上。

五、是否允許選中文本：

CSS3提供了一個名為user-select的屬性，用來設置在頁面中是否允許文本被選中。

CSS3技術使用user-select屬性設置是否允許文本被選中

該屬性可以取如下值：

• none，對象內部的文本不允許被選中。

• text，對象內部的文本允許被選中。

• all，對象內部的文本只允許作為一個整體被選中。

在CSS2時代，要想讓頁面文本不允許被鼠標選中，只能使用JavaScript技術編寫代碼。有了user-select屬性，實現這一效果變得更加簡單。

小海聲明

在頭條上發表的這些文章都是從前端開發的基礎開始一步一步講起的。我非常希望能有更多的前端開發初學者通過我寫的文章，逐步學到一定的知識，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學過程中的經驗，每寫一篇時我都儘量把握好措辭，用簡單易懂的語言描述，同時精心設計版面，讓版面更加豐富，激發閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費小海老師很久的時間。

希望收藏了這篇文章的你同時也可以關注一下“小海前端”的頭條號，因為這些文章都是連載的，並且是經過系統的歸納和總結的。塌下心來認真閱讀，你一定會學到對你有用的知識。

關注“小海前端”，我會繼續為大家奉上更加深入的前端開發文章，也希望更多的初學者跟著學下去，我們共同將前端開發的路努力堅持的走下去。

文章預告

明天的文章中，將為大家講解剩下的增強用戶界面的屬性，包括appearance和content屬性的使用。