CSS中點擊元素會產生一個默認的陰影效果,這個效果對于一些特定的設計要求有時候會帶來困擾,比如隱藏按鈕、圖片預覽等。下面提供三種CSS去除點擊陰影效果的方法。
/* 方法一:使用box-shadow屬性 */ button:focus, img:focus { outline: none; box-shadow: none; } /* 方法二:使用::-moz-focus-inner */ button::-moz-focus-inner { border: 0; outline: none; } /* 方法三:使用-webkit-tap-highlight-color */ button:focus, img:focus{ -webkit-tap-highlight-color: rgba(0,0,0,0); }
方法一使用box-shadow屬性,將點擊元素的陰影效果去除,但是該方法只適用于較新的瀏覽器。方法二是使用瀏覽器內置的::-moz-focus-inner屬性去除按鈕內陰影,但是這個屬性只對Firefox瀏覽器有效。方法三是使用-webkit-tap-highlight-color屬性去除元素陰影,適用于移動端設備。
根據自己的情況選擇適用的方法,去除元素點擊陰影效果可以讓頁面內容更加清晰美觀。
上一篇css 去掉默認的按鈕
下一篇jquery-ui的 庫