偏門卻又實用的 CSS 樣式

Sponsor

很早之前我們推薦大家看《推薦大家使用的CSS書寫規范、順序》，里面提到 CSS 的一些常用命名、規范等等，而今天主要是說一些偏門一點的 CSS 樣式、技巧。

什么是偏門，就是有些片段很少使用，時間久了就記不起來，但用的時候又要去找，所以這里為大家整理一些少用但又實用的 CSS 樣式，

整理：凹凸卿
個人Blog：https://github.com/asd0102433/blog （歡迎 star~）

部分由小編及網友提供，感謝你們~ 持續更新哦。

::-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

1. To apply platform specific styling to an element that doesn’t have it by default
2. 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開啟硬件加速

http://www.cnblogs.com/rubylouvre/p/3471490.html

-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, 計算屬性值

https://www.w3schools.com/cssref/func_calc.asp

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 代碼，歡迎在留言處提交給我們，一起收錄進來！

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。