div實(shí)現(xiàn)陰影邊框效果(適應(yīng)各主流瀏覽器)
發(fā)布時(shí)間:2013-09-16 11:25:23 作者:佚名
我要評(píng)論
陰影效果在以前或許會(huì)采用圖片來(lái)實(shí)現(xiàn),而如今使用css便可實(shí)現(xiàn),本文有個(gè)不錯(cuò)的示例,喜歡的朋友可以參考下
復(fù)制代碼
代碼如下:<!DOCTYPE HTML>
<html>
<head>
<title>CSs陰影框,Div陰影</title>
<style type="text/css">
*{ margin:0; padding:0; border:0; }
body{ padding:4em; font-family:Tahoma, Geneva, sans-serif }
/*box*/
.box { width:60%;background-color:#666}
.box p {line-height:1.8; padding:2em; position:relative; top:-5px; left:-5px;zoom:1;background-color:#ccc}
</style>
</head>
<body>
<div class="box">
<p>腳本之家提供</p>
</div>
</body>
</html>
相關(guān)文章
- 在ie下模擬css3中的box-shadow(陰影)可以使用ie的Shadow(陰影)濾鏡來(lái)實(shí)現(xiàn),需要注意的是該濾鏡必須配合background屬性一起使用,否則該濾鏡失效2013-09-11
CSS控制背景圖像平鋪實(shí)現(xiàn)邊框陰影效果
CSS控制背景圖像平鋪,從而實(shí)現(xiàn)區(qū)域邊框陰影的效果,可貴之處是本代碼不管你需要陰影的區(qū)域是多大,它都能自動(dòng)適應(yīng),個(gè)人感覺(jué)還不錯(cuò),具體實(shí)現(xiàn)如下建議收藏下哦2013-08-25- 想做個(gè)頁(yè)面用到css3的圓角和陰影效果,但ie瀏覽器不支持,之前也聽(tīng)說(shuō)有插件可以實(shí)現(xiàn),周六在網(wǎng)上找到了一個(gè)方法,原文如下: 但凡是前端工程師,都知道IE6,IE7,IE8不支2013-07-02
css實(shí)現(xiàn)跨瀏覽器的box-shadow盒陰影效果告別圖片實(shí)現(xiàn)類似效果(2)
前面的文章雖然實(shí)現(xiàn)IE下的盒陰影效果也是使用的濾鏡,但是使用的是shadow濾鏡,這種濾鏡的效果很牽強(qiáng),效果過(guò)渡不自然.而本文實(shí)現(xiàn)的IE下的盒陰影效果就相對(duì)非常自然,而且2013-01-08css實(shí)現(xiàn)跨瀏覽器的盒陰影效果告別圖片實(shí)現(xiàn)類似效果
在web頁(yè)面的UI表現(xiàn)中,投影效果可以說(shuō)是非常常見(jiàn)的一種表現(xiàn)效果了,然而,在CSS2的時(shí)代,我們多半使用圖片實(shí)現(xiàn)類似效果,或是使用CSS其他屬性模擬陰影效果,但是,現(xiàn)在,CSS2013-01-08css div 邊框陰影利用背景圖或內(nèi)外層div實(shí)現(xiàn)層次感覺(jué)陰影效果
在網(wǎng)頁(yè)布局中偶爾會(huì)用到div 邊框陰影做一些特殊效果本文介紹兩種實(shí)現(xiàn)方法:一種是利用內(nèi)外層的div邊框來(lái)實(shí)例層次感覺(jué)的css邊框陰影效果,另一種是利用了背景圖片再加內(nèi)外div2012-12-18- 你在使用box-shadow來(lái)實(shí)現(xiàn)陰影效果的時(shí)候,有沒(méi)有注意到有些情況下,陰影并不是透明的效果2011-08-28
- 通過(guò)這個(gè)小例子你是否覺(jué)得CSS處理文字效果方面功能比較強(qiáng)大呢?確實(shí)是這樣的,用CSS可以給文字加陰影、加背景,讓文字變色炫彩、變成3維的,這并不難,好好研究一下這幾個(gè)2009-10-23
- 一般我們可以使用背景圖的方式給圖片添加陰影,但對(duì)于不固定尺寸的圖片如何實(shí)現(xiàn)呢?我們可以采取“視覺(jué)欺騙大法”——定義漸變邊框來(lái)實(shí)現(xiàn): [code] 2009-07-11
最新評(píng)論

