很早之前我們推薦大家看《 推薦大家使用的CSS書寫規範、順序》,裡面提到 CSS 的一些常用命名、規範等等,而今天主要是說一些偏門一點的 CSS 樣式、技巧。
什麼是偏門,就是有些片段很少使用,時間久了就記不起來,但用的時候又要去找,所以這裡為大家整理一些少用但又實用的 CSS 樣式,
整理:凹凸卿
部分由小編及網友提供,感謝你們~ 持續更新哦。
::-webkit-input-placeholder
input 的 H5 placeholder
屬性,很好用,但不能直接改這個文字顏色,所以目前的解決方法就是用::input-placeholder
屬性來改。
小Tips: 配合 opacity 屬性使用效果更佳哦!
::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: pink; } ::-moz-placeholder { /* Firefox 19+ */ color: pink; } :-ms-input-placeholder { /* IE 10+ */ color: pink; } :-moz-placeholder { /* Firefox 18- */ color: pink; }
@impor 嵌套樣式表文件
使用它可以在樣式表再次內嵌套樣式表文件,比如一些組件CSS可以使用,但不太推薦使用這個,因為加載時有可能會被漏掉。
@import url("reset.css"); @import url("global.css"); @import url("font.css");
outline 當點擊input元素時顯示的當前狀態線(外發光)
這個狀態線是用來提示用戶當前狀態指示作用,但因為效果很美觀,建議去掉,或自己改個樣式
div { outline: none; //移動瀏覽器默認的狀態線 // outline: 5px dotted red; 也可以設置樣式 }
contenteditable 設置element是否可編輯
<p contenteditable="true">可編輯</p>
webkit-playsinline
手機video 都可以在頁面中播放,而不是全屏播放了。
<video id="myvideo" src="test.mp4" webkit-playsinline="true"></video>
position: absolute, 讓margin有效的
設置left:0, right:0 就可以。原因是2邊都是0不存在邊距,element就可以得出距離,並居中。
div { position: absolute; left: 0; right: 0; margin: 0 auto; }
使用 clearfix 清楚浮動,解決父類高度崩塌。
.clearfix { zoom: 1; } .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
user-select 禁止用戶選中文本
div { user-select: none; /* Standard syntax */ }
清除手機tap事件後element 時候出現的一個高亮
*{ -webkit-tap-highlight-color: rgba(0,0,0,0); }
::-webkit-scrollbar-thumb
可以修改谷歌的滾動條樣式,safari好像也可以
-webkit-appearance:none
- To apply platform specific styling to an element that doesn’t have it by default
- To remove platform specific styling to an element that does have it by default
移除瀏覽器默認的樣式,比如chrome的input默認樣式
input, button, textarea, select { *font-size: 100%; -webkit-appearance:none; }
CSS開啟硬件加速
-webkit-transform: translateZ(0);
使用CSS transforms 或者 animations時可能會有頁面閃爍的bug
-webkit-backface-visibility: hidden;
-webkit-touch-callout 禁止長按鏈接與圖片彈出菜單
-webkit-touch-callout: none;
transform-style: preserve-3d 讓元素支持3d
div { -webkit-transform: rotateY(60deg); /* Chrome, Safari, Opera */ -webkit-transform-style: preserve-3d; /* Chrome, Safari, Opera */ transform: rotateY(60deg); transform-style: preserve-3d; }
perspective 透視
這個屬性的存在決定你看到的元素是2d還是3d。一般設置在包裹元素的父類上。
.div-box { perspective: 400px; }
css實現不換行、自動換行、強制換行
//不換行 white-space:nowrap; //自動換行 word-wrap: break-word; word-break: normal; //強制換行 word-break:break-all;
box-sizing 讓元素的寬度、高度包含border和padding
{ box-sizing: border-box; }
calc function, 計算屬性值
div { width: calc(100% - 100px); }
上面的例子就是讓寬度為100%減去100px的值,項目中很適用,要IE9以上兼容。
css3 linear-gradient 線性漸變
默認開始在top, 也可以自定義方向。
div { linear-gradient(red, yellow) } background: linear-gradient(direction, color-stop1, color-stop2, ...);
常用的選擇器 :nth-child Selector
以下代碼是選擇父類下第一個子節點,p元素,建議學習這個樣式屬性的使用,很實用的。
p:nth-child(1) { ... }
就介紹到這裡,以後會不斷更新,如果有好的 CSS 代碼,歡迎在留言處提交給我們,一起收錄進來!
推薦:查看最受歡迎的 301 個設計網站 → http://hao.shejidaren.com
交流:結交更多有才華的設計師?請加入UI設計QQ群,與50000名設計師交流設計。