常用偏門css樣式有哪些

這篇文章主要為大家展示了“常用偏門css樣式有哪些”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“常用偏門css樣式有哪些”這篇文章吧。

::-webkit-input-placeholder

input 的 H5 placeholder屬性，很好用，但不能直接改這個文字顏色，所以目前的解決方法就是用::input-placeholder屬性來改。

小Tips: 配合 opacity 屬性使用效果更佳哦！

偏門卻又實用的 CSS 樣式

::-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 嵌套樣式表文件

使用它可以在樣式表再次內(nèi)嵌套樣式表文件，比如一些組件CSS可以使用，但不太推薦使用這個，因為加載時有可能會被漏掉。

@import url("reset.css"); @import url("global.css"); @import url("font.css");

outline 當點擊input元素時顯示的當前狀態(tài)線（外發(fā)光）

偏門卻又實用的 CSS 樣式

這個狀態(tài)線是用來提示用戶當前狀態(tài)指示作用，但因為效果很美觀，建議去掉，或自己改個樣式

div { outline: none; //移動瀏覽器默認的狀態(tài)線 // 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 時候出現(xiàn)的一個高亮

*{ -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&rsquo;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實現(xiàn)不換行、自動換行、強制換行

//不換行 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

以下代碼是選擇父類下第一個子節(jié)點，p元素，建議學習這個樣式屬性的使用，很實用的。

p:nth-child(1) { ... }

以上是“常用偏門css樣式有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業(yè)資訊頻道！