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