蘋果公司于2017年推出了iPhone X,這款智能手機在操作系統及其軟件上都有很多亮點,其中一點就是其CSS。
/* 強制所有元素滾動條始終可見 */ ::-webkit-scrollbar { -webkit-appearance: none; width: 6px; height: 6px; } ::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,.1); border-radius: 5px; height: 60px; } ::-webkit-scrollbar-thumb:hover { background-color: rgba(0,0,0,.2); } /* 所有元素禁止選擇 */ * { -webkit-user-select: none; user-select: none; } /* 禁止調用系統默認樣式 */ *, *::before, *::after { -webkit-touch-callout: none; -webkit-user-select: none; -webkit-app-region: no-drag; -webkit-tap-highlight-color: rgba(0,0,0,0); user-select: none; font-family: "-apple-system", "SF UI Display", "Helvetica Neue", sans-serif; }
上述CSS代碼展示了iPhone X所使用的一些視效和交互特性的實現方法。通過使用webkit樣式聲明,它們可以適用于iOS Safari瀏覽器。其中,::-webkit-scrollbar設置了滾動條的樣式,*及其特定前綴則使得所有元素難以被選擇。
綜上,iPhone X的CSS為其提供了優秀的可視化效果和易操作的特性,使得用戶體驗更加出色。
上一篇ios支持css3
下一篇css如何將按鈕左對齊