一直感覺這兩個(gè)偽類對象不是很重要，并且IE對它兩兄弟并不支持，所以也沒有怎么靜下心來研究，只有在清楚浮動(dòng)clearfix的時(shí)候會(huì)用到哈，其他都很 少用！不過最近在研究css3的時(shí)候覺得它兩個(gè)的搭配不僅能夠減少代碼量并且能整出很巴適的效果，所以就來研究研究哈！

 一、先來看哈他們的定義哈！

1、selector:before( sRules ) 它要和content屬性一起使用，設(shè)置在對象前（依據(jù)對象樹的邏輯結(jié)構(gòu)）發(fā)生的內(nèi)容；

2、selector:after( sRules ) 和before用法一樣，不過它是設(shè)置在對象后（依據(jù)對象樹的邏輯結(jié)構(gòu)）發(fā)生的內(nèi)容；

看例子容易理解些！

下面我們來 看看css3的配合著它的應(yīng)用是哪樣的？

雖說比較抽象，我不說你們應(yīng)該不知道是個(gè)玻璃瓶的蓋子吧 瓶身部分的代碼量太多了就不帖了。

所以before和after運(yùn)用的好可以節(jié)省html標(biāo)簽，并且配合css3做出很好的效果，當(dāng)然做著玩的，不是太實(shí)用。

二、下面順帶說些css3的屬性吧，(border-radius&box-shadow)我也只是正在慢慢摸索中···········

border-radius開始啦！！

1、border-radius：none | <length>{1,4} [ / <length>{1,4} ]?

相關(guān)屬性：border-top-right-radius border-bottom-right-radius border-bottom-left-radius border-top-left-radius,其實(shí)border-radius就是他們四個(gè)屬性的簡寫。

取值：<length>由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長度值，不可能負(fù)值。

看這幅圖說明，不然容易暈。

說明：

1、第一個(gè)值即x是指水平半徑。

2、如果第二個(gè)省略即y，則他等于第一個(gè)值，這時(shí)這個(gè)角就是一個(gè)四分之一的圓角。

3、如果任意一個(gè)值為0，則這個(gè)角為矩形，不會(huì)為圓形。

4、值不允許是負(fù)值。

當(dāng)border-radius：<length>{1,4} [ / <length>{1,4} ]?時(shí)

1、如果斜線前后的值都存在，那么斜線前的值設(shè)置為水平半徑（x),斜線后的值設(shè)置為垂直半徑(y)，如果沒有斜線則水平半徑和垂直半徑相等，

也就相當(dāng)于四分之一個(gè)圓。如：border-radius:46px/10px;四個(gè)角的半徑大小都為46px/10px。

2、四個(gè)值的順序是按照top-left,top-right,bottom-right,bottom-left(反正是順時(shí)針?。磕鏁r(shí)針?。?如果bottom-left省略它就等于top-right，

如果bottom-right省略它就等于top-left，如果top-right省略它就等于top-left（有點(diǎn)對角的關(guān)系）

3、應(yīng)用范圍：應(yīng)用所有元素，除了table的樣式屬性是boder-collapse為collapse。

我們看看常見的寫法有哪些？以及對應(yīng)的解釋是什么？

.div{box-shadow:0 0 10px #F69,0 0 10px 10px yellow}

      顯示如下：

  看#f69的顏色值顯示在yellow上面。因?yàn)辄S色的陰影擴(kuò)展了10像素。比f69的寬些，所以不會(huì)被f69給擋住。

下面我們看一個(gè)四色的陰影。

.div{box-shadow:-10px 0 red, 10px 0 blue,0 -10px yellow,0 10px green; width:200px; height:100px; background:#6C9;}

  顯示如下：

看到圖片可能會(huì)想說，它是怎樣確定紅、藍(lán)、黃、綠色的位置，為什么剛好就在盒子的四個(gè)邊？其實(shí)給對象四邊設(shè)計(jì)陰影，我們是通過改變x-offset和y-offset的正負(fù)值來實(shí)現(xiàn)，其中x-offset 為負(fù)值時(shí)，生成左邊陰影，為正值時(shí)生成右邊陰影，y-offset為正值是生成底部陰影，為負(fù)值時(shí)生成頂部陰影。如果x-offset和y-offset設(shè)置為0 的話那么這個(gè)盒子的四周都會(huì)有陰影。

下面我們給四個(gè)邊都設(shè)置上模糊值，一起來看看起效果。

.box{width:200px; height:100px;background:#6C9; box-shadow:-10px 0 10px red, 10px 0 10px blue,0 -10px 10px yellow,0 10px 10px green;}

顯示如下：

最新評論