CSS進階（21）—— CSS中的裝飾屬性和用戶體驗屬性

本章主要來聊聊CSS中一些雜七雜八的屬性，我的會將裏面的坑提取出來測試一遍加深下印象，比較符合常規的屬性這裏就不贅述了。

1.不同凡響的background-position屬性

background-position屬性支持數值，百分比，關鍵字。固然你也能夠混用關鍵字和數值，如:background-position:right 40px bottom 20px;表示距離右邊緣40像素，距離底邊緣20像素。background-position的不一樣之處在於其百分比計算值有其特殊的計算公式，具體計算公式以下

positionX = （容器的寬度 - 圖片的寬度）* percentX

positionY = （容器的高度 - 圖片的高度）* percentY

爲何CSS要給background單獨設置一個這麼奇怪的計算方式？不防來思考一下，咱們最愛用的100%值，若是你給background-position設置了100% 100%，若是按照正常的計算方式，那麼這張背景圖他就消失了，然而實際狀況是這張背景圖被固定到了容器右下角，所以這個計算方式是有必定好處的，只是在使用的時候須要注意一下。

2.被嫌棄又十分重要的outline屬性

outline表示元素的輪廓，語法和border屬性相似，如:outline:1px solid #cccc;

outline是一個和用戶體驗密切相關的屬性，與focus狀態以及鍵盤訪問密切相關。在桌面端網頁，咱們能夠經過鼠標點擊來完成通常的訪問操做，然而這世上存在鼠標沒電的狀況，還存在不須要鼠標的設備，好比如今愈來愈普及的智能電視，就是用遙控器來操做的（別跟我說你家電視是觸屏的，gun！）。這個時候，用戶就須要知道本身focus了哪一個元素，若是沒有outline輔助屬性，你可能須要經過border去模擬focus狀態，然而瀏覽器自帶的功能爲何還要費盡心思本身去模擬呢？

瞭解了outline的重要性後，之後在CSS重置的時候必定要避免重置outline，這樣的錯誤會形成部分場景的用戶使用障礙。

{
    outline:none; //千萬不要這樣作！
}
複製代碼

outline屬性除了和focus有較深的羈絆以外，還在別的地方大有用武之地。這裏就不得不提outline的另外一個特殊屬性了，outline擁有不佔據任何空間的屬性。 藉助這個屬性，咱們能夠實現一些比較棘手的問題。

案例1：頭像裁剪的矩形鏤空效果

要實現這種中間鏤空透明、四周蒙層遮罩的效果，就能夠藉助outline屬性。核心CSS以下

<style>
.father{
     overflow: hidden;
}
.son{
     width: 80px;
     height: 80px;
     outline: 9999px solid rgba(0,0,0,0.5);
     cursor: move;
}
 </style>
複製代碼

3.光標屬性cursor

cursor屬性決定了鼠標移入元素時，鼠標的樣式，咱們用的最多的就是cursor：pointer，把鼠標移入區域變成可點擊效果。除此以外，cursor還有不少好用的關鍵字，這裏作個記錄方便查閱。

（1）cursor：auto 默認值。auto表示光標形狀根據標籤類型自動進行處理。如button標籤鼠標移入cursor:auto被處理成default，注意不是pointer，帶href屬性的連接表現爲pointer。所以目前Web頁面的按鈕使用pointer手型的作法並不標準，連接纔是手型。

（2）cursor：default。系統默認光標形狀.

（3）cursor：none。這個聲明就是讓光標隱藏不見的意思，什麼狀況下咱們不須要鼠標呢？沒錯，你看視頻全屏的時候，若是網站的用戶體驗作得好的話就會自動隱藏鼠標。

（4）cursor：pointer。光標表現爲一隻伸出食指的手，通常用於可點擊的元素。

（5）cursor：help。光標頭上帶了個問號,通常用於幫助文檔。

（6）cursor：progress。打開部分軟件的時候鼠標旁邊就會出現個轉呀轉的符號，表示數據正在加載中。

（7）cursor:wait。這個符號通常在系統死機的時候會出現，相似儘可能不要使用，以避免引發沒必要要的恐慌。

（8）cursor:text。表示文字可被選中。

（9）cursor：vertical-text。表示文字可被垂直選中相似

（10）cursor：crossshair。十字光標，相似畫圖裏的取色工具。

（11）cursor：cell。空心十字光標，excel軟件裏常常能見到他。

（12）cursor：move。帶箭頭的十字光標，通常表示當前元素可拖拽。

（13）cursor：grab。光標是一個五指張開的手，通常用於元素可被選取。

（13）cursor：grabbing。光標是一個五指收攏的手，通常表示選取了元素。

（14）cursor：zoom-in。光標形似放大鏡。

（15）cursor：zoom-out。光標形似縮小鏡。

（16）cursor：not-allowed。光標表示禁止，通常表示按鈕禁用。

.........................（懶得抄了）

除了以上幾種經常使用的以外，cursor還支持自定義圖標。使用方法以下：cursor：url（example.png）。預覽效果以下：

本文的光標圖片建議看我原來那篇文章。

文章連接

不忘初心，方得始終

喜歡博主的童鞋能夠掃描二維碼加博主好友~ 也能夠掃中間二維碼入駐博主的粉絲羣（708637831）~固然你也能夠掃描二維碼打賞並直接包養帥氣的博主一枚。