|
二、邊框線
如果你看了代碼，沒有頭暈的話，會不會有這么一個疑惑，為什么不用border來寫邊框線?
如果用border來寫的話，border的寬度會跟width重疊，導(dǎo)致盒子占據(jù)的空間為200+1+1=202px，很惡心的數(shù)字，而且border也不貼著邊界，如圖：
所以用這樣一種做法來實現(xiàn)邊框效果：box-shadow/text-shadow ；
一般我們是用border來給元素描邊，前幾天逛論壇的時候，忘記哪個論壇了，所以沒鏈接，見諒見諒哈...看到這樣一種做法：給文字描邊，或者你暫且別往下看，想想如何用css3給文字描邊？
一般思維會想到text-shadow這個屬性，但是它是投影，跟描邊還是有區(qū)別的，text-shadow寫法如下：
text-shadow:2px 0px 0px #f00;
投影效果如圖：
具體的投影資料可以參考我這篇文章：CSS3陰影；
上面是在沒有羽化的情況下向右偏移，然而text-shadow可以多重投影，那么如果向上下左右四個方向同時投影，會怎么樣呢?
text-shadow:2px 0px 0px #f00,0px -2px 0px #f00,-2px 0px 0px #f00,0px 2px 0px #f00;
投影效果如圖：
就變成適應(yīng)文字形狀的描邊效果了，當(dāng)初因為border不能滿足文字的描邊需求，才想出這樣的法子來實現(xiàn)描邊，那現(xiàn)在反推，既然border不能用來描邊了，那就用box-shadow投影描邊的方法來實現(xiàn)邊框。
做出來的效果如下：
我給底部寫了個投影：
-webkit-box-shadow:-1px 1px 2px rgba(50,50,50,0.1);
少許的向前向右偏移，基本的造型效果就已經(jīng)出來了，但是這樣還不行，盒子的透明是透明了，但是感覺朦朦朧朧的，應(yīng)該加強(qiáng)透明的處理，要不然體現(xiàn)不出通透性（可以跟第一個圖對比下）。
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 純CSS3透明水晶盒 [2] 下一頁 純CSS3透明水晶盒 [4]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 3 頁 純CSS3透明水晶盒 [3]
