web前端有很多實用有趣的小技巧，達內(nèi)廣州web培訓(xùn)在這里介紹下CSS上的冷門小技巧。
隱藏鼠標(biāo)的惡作劇
*{
cursor: none!important;
}
簡單的文字模糊效果
以下兩行簡單的CSS3代碼可達到將文字模糊化處理的目的，效果有點像使用PS的濾鏡。
p {
color: transparent;
text-shadow: #111 0 0 5px;
}
垂直居中
當(dāng)需要垂直居中顯示某個DIV時，我們知道CSS中天然有水平居中的樣式text-align:center。唯獨這個垂直居中無解。當(dāng)然你可以將容器設(shè)置為display:table，然后將子元素也就是要垂直居中顯示的元素設(shè)置為display:table-cell，然后加上vertical-align:middle來實現(xiàn)，但此種實現(xiàn)往往會因為display：table而破壞整體布局，廣州web前端培訓(xùn)認為還不如直接用table標(biāo)簽了呢。
下面這個樣式利用了translate來巧妙實現(xiàn)了垂直居中樣式，需IE9+。
.center-vertical {
position: relative;
top: 50%;
transform: translateY(-50%);
}
多重邊框
利用重復(fù)指定box-shadow來達到多個邊框的效果
div {
box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(0, 0, 0, 0.2), 0 0 0 18px rgba(0, 0, 0, 0.2), 0 0 0 24px rgba(0, 0, 0, 0.2);
height: 200px;
margin: 50px auto;
width: 400px
}
實時編輯CSS
通過設(shè)置style標(biāo)簽的display:block樣式可以讓頁面的style標(biāo)簽顯示出來，并且加上contentEditable屬性后可以讓樣式成為可編輯狀態(tài)，更改后的樣式效果也是實時更新呈現(xiàn)的。此技巧在IE下無效。
<!DOCTYPE html>
<html>
<body>
<style style="display:block" contentEditable>
body { color: blue }
</style>
</body>
</html>
創(chuàng)建長寬比固定的元素
通過設(shè)置父級窗口的padding-bottom可以達到讓容器保持一定的長度比的目的，廣州web前端培訓(xùn)認為這在響應(yīng)式頁面設(shè)計中比較有用，能夠保持元素不變形。
<div style="width: ; position: relative; padding-bottom: 20%;">
<div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0;background-color:yellow;">
this content will have a constant aspect ratio that varies based on the width.
</div>
</div>
CSS中也可以做簡單運算
通過CSS中的calc方法可以進行一些簡單的運算，從而達到動態(tài)指定元素樣式的目的。
.container{
background-position: calc( - 50px) calc( - 20px);
}
知道上面提到的小技巧，可能在web前端開發(fā)中更加方便，成品得到更好的效果，以上是達內(nèi)廣州web前端培訓(xùn)帶來的CSS小技巧。
