7个CSS你可能不知道的技巧
1、CSS的惡作劇
相信你看完以下代碼后能夠預(yù)料到會(huì)出現(xiàn)什么效果。
*{?cursor:?none!important;?}2、簡(jiǎn)單的文字模糊效果
以下兩行簡(jiǎn)單的CSS3代碼可達(dá)到將文字模糊化處理的目的，出來(lái)的效果有點(diǎn)像使用PS的濾鏡，so cool!
p?{?color:?transparent;?text-shadow:?#111 0 0 5px;?}3、垂直居中
有好多次博主都有這樣的需求，垂直居中顯示某個(gè)DIV，我們知道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)閐isplay：table而破壞整體布局，那還不如直接用table標(biāo)簽了呢。
下面這個(gè)樣式利用了translate來(lái)巧妙實(shí)現(xiàn)了垂直居中樣式，需IE9+。
.center-vertical?{?position:?relative;?top:?50%;?transform:?translateY(-50%);?}相比而言，水平居中要簡(jiǎn)單得多，像上面提到的text-align:center，經(jīng)常用到的技巧還有margin:0 auto。但對(duì)于margin大法也只在子元素寬度小于容器寬度時(shí)管用，當(dāng)子元素寬度大于容器寬度時(shí)此法失效。
如法炮制，利用left和transform同樣可實(shí)現(xiàn)水平居中，不過(guò)意義不大，畢竟text-align和margin差不多滿足需求了。
.center-horizontal?{?position:?relative;?left:?50%;?transform:?translateX(-50%);?}4、多重邊框
利用重復(fù)指定box-shadow來(lái)達(dá)到多個(gè)邊框的效果
在線演示
/*CSS Border with Box-Shadow Example*/?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?}5、實(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>6、創(chuàng)建長(zhǎng)寬比固定的元素
通過(guò)設(shè)置父級(jí)窗口的padding-bottom可以達(dá)到讓容器保持一定的長(zhǎng)度比的目的，這在響應(yīng)式頁(yè)面設(shè)計(jì)中比較有用，能夠保持元素不變形。
<div?style="width:?100%;?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>7、CSS中也可以做簡(jiǎn)單運(yùn)算
通過(guò)CSS中的calc方法可以進(jìn)行一些簡(jiǎn)單的運(yùn)算，從而達(dá)到動(dòng)態(tài)指定元素樣式的目的。
.container{?background-position:?calc(100%?-?50px)?calc(100%?-?20px);?}文章推薦程序員效率：畫流程圖常用的工具程序員效率：整理常用的在線筆記軟件遠(yuǎn)程辦公：常用的遠(yuǎn)程協(xié)助軟件，你都知道嗎？51單片機(jī)程序下載、ISP及串口基礎(chǔ)知識(shí)硬件：斷路器、接觸器、繼電器基礎(chǔ)知識(shí)
總結(jié)
以上是生活随笔為你收集整理的7个CSS你可能不知道的技巧的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 武汉理工大学计算机专业课程表,武汉理工大
- 下一篇： css块元素与行内元素特点,CSS区分块