被遺忘的CSS
平時在工作中遇到一些比較偏門的 css ,用過一兩次,但是老是記不住,於是又需要去 baidu、 google ,所以都積累起來,方便以後檢視
outline 當input選中的時候會出現一個邊框
/*一般設定成 none*/ textarea:focus, input:focus{ outline: none; }
contenteditable 規定元素內容是否可編輯
<div id="example-one" contenteditable="true">
#example-one { margin-bottom: 10px; } [contenteditable="true"] { padding: 10px; outline: 2px dashed #CCC; } [contenteditable="true"]:hover { outline: 2px dashed #0090D2; }
webkit-playsinline video 都可以在頁面中播放,而不是全屏播放
<video id="myvideo" src="test.mp4" webkit-playsinline="true"></video>
clearfix 清除浮動
.clearfix { zoom: 1; } .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
user-select 禁止選中文字
p { -webkit-user-select: none; /* Chrome, Opera, Safari */ -moz-user-select: none; /* Firefox 2+ */ -ms-user-select: none; /* IE 10+ */ user-select: none; /* Standard syntax */ }
webkit-scrollbar 自定義瀏覽器滾動條
/*定義滾動條寬高及背景,寬高分別對應橫豎滾動條的尺寸*/ div::-webkit-scrollbar { width: 5px; height: 5px; background-color: rgba(245, 245, 245, 0.47); } /*定義滾動條的軌道,內陰影及圓角*/ div::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); border-radius: 10px; background-color: #f5f5f5; } /*定義滑塊,內陰影及圓角*/ div::-webkit-scrollbar-thumb { /*width: 10px;*/ height: 20px; border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); background-color: rgba(85, 85, 85, 0.25); }
webkit-appearance 去除預設樣式
input, button, textarea, select { *font-size: 100%; -webkit-appearance:none; }
使用CSS transforms 或者 animations時可能會有頁面閃爍的bug
elements { -webkit-backface-visibility: hidden; }
transform-style: preserve-3d 讓元素支援3D
elements { -webkit-transform: rotateY(60deg); /* Chrome, Safari, Opera */ -webkit-transform-style: preserve-3d; /* Chrome, Safari, Opera */ transform: rotateY(60deg); transform-style: preserve-3d; }
perspective 這個屬性定義子元素會獲得透視效果,而不是元素本身
<div class="cube pers250"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </div>
.cube { width: 100%; height: 100%; backface-visibility: visible; perspective-origin: 150% 150%; transform-style: preserve-3d; -webkit-backface-visibility: visible; -webkit-perspective-origin: 150% 150%; -webkit-transform-style: preserve-3d; } .pers250 { perspective: 250px; -webkit-perspective: 250px; } .face { display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center; }
css實現不換行、自動換行、強制換行
/*不換行*/ white-space:nowrap; /*自動換行*/ word-wrap: break-word; word-break: normal; /*強制換行*/ word-break:break-all;
font-smoothing 設定字型平滑,會讓字型看起來比較舒服
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, p, .navbar, .brand, a, .td-name, td { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: "Microsoft YaHei", "微軟雅黑", 'Muli', "Helvetica", Arial, sans-serif; }
::selection 修改選中文字顏色
::selection { color: white; background-color: rgba(0, 0, 0, 0.8); } ::-webkit-selection { color: white; background-color: rgba(0, 0, 0, 0.8); } ::-moz-selection { color: white; background-color: rgba(0, 0, 0, 0.8); }
相關文章
- 那些被遺忘的Enix遊戲遊戲
- 被遺忘的Java關鍵字:transientJava
- 再談復現 Sora:被仰望與被遺忘的Sora
- iOS被開發者遺忘在角落的NSException(轉)iOSException
- 被遺忘的Android mipmaps簡介Android
- 那迷人的被遺忘的語言:Prolog
- 應用機器學習時被遺忘的兩個步驟機器學習
- 易被遺忘的C/C++要點總結C++
- DDD值物件:被遺忘的價值 – SoftwareMill Tech Blog物件REM
- 《博德之門 3》開發者專訪:重返「被遺忘的國度」
- 被世界遺忘的掃雷遊戲,只有中國人還在沉迷遊戲
- 容易被遺忘的前端基礎:JavaScript 記憶體詳解前端JavaScript記憶體
- 世界首臺計算機發明人沃茲:被遺忘的英雄計算機
- 最實用也最容易被遺忘的 Linux 命令列使用技巧Linux命令列
- 被遺忘權的崩塌:當AI可以通過你的朋友瞭解你AI
- 從51.com到開心 10大即將被遺忘的web“部落”Web
- 被人遺忘的Memcached記憶體注射記憶體
- 容易遺忘的知識點總結
- 那些經常被遺忘的 Java 面試題Java面試題
- 被遺棄的執行緒執行緒
- 半年前端,鞏固css知識,有遺忘的同學可以進來看看啦前端CSS
- Eruda 一個被人遺忘的除錯神器除錯
- Shareaholic:三大SNS貢獻全球15%轉引流量 Google+被遺忘Go
- 密碼遺忘通關手冊密碼
- [譯] 被遺忘的物件導向程式設計史(軟體編寫)(第十六部分)物件程式設計
- 反射--我快要遺忘的重要知識點整理反射
- CSS備忘錄CSS
- MySQL 5.7遺忘root密碼重置記錄MySql密碼
- 網際網路出海風大雨大,融雲助力 App 守護使用者「被遺忘權」APP
- 拒絕遺忘:高效的動態規劃演算法動態規劃演算法
- 知其所以然之永不遺忘的演算法演算法
- 一個提高N倍系統新能的程式設計點,卻總是被普通開發們遺忘程式設計
- Linux遺忘root密碼的其中兩種解決方法Linux密碼
- 嘿,還記得那些年遺忘的排序演算法嗎排序演算法
- mysql密碼遺忘和登陸報錯問題MySql密碼
- 人工智慧硬體創業不能遺忘的4S機遇人工智慧創業
- linux系統root密碼遺忘的情況下的解決辦法Linux密碼
- 請問論壇的郵件列表或者密碼遺忘是如何處理的?密碼