前端少為人知的知識–前端冷知識集錦

CSS篇

關於CSS的惡作劇

相信你看完以下代碼後能夠預料到會出現什麼效果。

*{

cursor:none!important;

}

簡單的文字模糊效果

以下兩行簡單的CSS3代碼可達到將文字模糊化處理的目的，出來的效果有點像使用PS的濾鏡，so cool!

p{

color:transparent;

text-shadow:#111 0 0 1px;

}

這是一段文字模糊化的示例這是一段文字模糊化的示例這是一段文字模糊化的示例

垂直居中

有好多次博主都有這樣的需求，垂直居中顯示某個DIV，我們知道CSS中天然有水平居中的樣式text-align:center。唯獨這個垂直居中無解。

當然你可以將容器設置為display:table，然後將子元素也就是要垂直居中顯示的元素設置為display:table-cell，然後加上vertical-align:middle來實現，但此種實現往往會因為display：table而破壞整體布局，那還不如直接用table標籤了呢。

下面這個樣式利用了translate來巧妙實現了垂直居中樣式，需IE9+。

.center-vertical{

position:relative;

top:50%;

transform:translateY(-50%);

}

相比而言，水平居中要簡單得多，像上面提到的text-align:center，經常用到的技巧還有margin:0 auto。但對於margin大法也只在子元素寬度小於容器寬度時管用，當子元素寬度大於容器寬度時此法失效。

如法炮製，利用left和transform同樣可實現水平居中，不過意義不大，畢竟text-align和margin差不多滿足需求了。

.center-horizontal{

position:relative;

left:50%;

transform:translateX(-50%);

}

多重邊框

利用重複指定box-shadow來達到多個邊框的效果

查看演示

/*CSS Border with Box-Shadow Example*/

div{

box-shadow:6pxrgba(,,,0.2),12pxrgba(,,,0.2),18pxrgba(,,,0.2),24pxrgba(,,,0.2);

height:200px;

margin:50pxauto;

width:400px

}

實時編輯CSS

通過設置style標籤的display:block樣式可以讓頁面的style標籤顯示出來，並且加上contentEditable屬性後可以讓樣式成為可編輯狀態，更改後的樣式效果也是實時更新呈現的。此技巧在IE下無效。擁有此技能者，逆天也！

GIF/20K

創建長寬比固定的元素

通過設置父級窗口的padding-bottom可以達到讓容器保持一定的長度比的目的，這在響應式頁面設計中比較有用，能夠保持元素不變形。

this content will have a constant aspect ratio that varies based on the width.

GIF/224K

CSS中也可以做簡單運算

通過CSS中的calc方法可以進行一些簡單的運算，從而達到動態指定元素樣式的目的

.container{

background-position:calc(100%-50px)calc(100%-20px);

}

點擊展開全文

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！