- 嘗試體驗(yàn)一下費(fèi)資定律
擴(kuò)大點(diǎn)擊范圍的益處：提高易用性（隨著觸控屏幕愈來愈普及诬乞，這一點(diǎn)會(huì)變得更加重要，沒有人想點(diǎn)擊那個(gè)討厭的小按鈕很多次）
本小節(jié)的練習(xí)：擴(kuò)大點(diǎn)擊按鈕的點(diǎn)擊范圍
效果圖：
擴(kuò)大了點(diǎn)擊范圍的按鈕
解釋一下：
我們希望右邊的按鈕像左邊的按鈕一樣有較大的點(diǎn)擊范圍（加上白色區(qū)域）颅痊，但又不希望有白色區(qū)域來影響我們的布局和控件大小
----總之而言涛碑，最終效果=右邊的大小+左邊的點(diǎn)擊范圍
小測(cè)試
html
<button class="button"></button>
第一步
隨意創(chuàng)建按鈕，不一定要像以下例子一樣
css
padding: 2em;
background:#58a url("cross.svg") no-repeat center;
background-size: 40%;
border-radius: 50%;
border: .1em solid rgba(0,0,0,.3) inset;
效果：
普通的按鈕
第二步：
我們給按鈕添加一個(gè)偽元素（擴(kuò)充點(diǎn)擊范圍）
并運(yùn)用上一小節(jié)的cursor改變一下游標(biāo)樣式
.button{
padding: 2em;
background:#58a url("cross.svg") no-repeat center;
background-size: 40%;
border-radius: 50%;
border: .1em solid rgba(0,0,0,.3) inset;
position: relative;
cursor: pointer;
}
.button::before{
position: absolute;
left: -10px;
right: -10px;
top: -10px;
bottom: -10px;
content: '';
}
并不能截圖到游標(biāo)，所以就不扔圖了姨蟋，大家測(cè)試一下吧
（可以給我推薦幾款截圖軟件么？立帖，目前感覺最好用的還是QQ截圖眼溶，真是尷尬）
簡單兩步，就能大大提高按鈕的點(diǎn)擊范圍晓勇。
這些細(xì)節(jié)往往能給用戶更好的體驗(yàn)堂飞！
