腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

css3實(shí)現(xiàn)針線縫合效果(圖解步驟)

發(fā)布時(shí)間：2013-02-04 10:40:36 作者：佚名

我要評(píng)論

什么是CSS3縫合效果,可以參考一下相關(guān)網(wǎng)站(IT EXPRESS)側(cè)邊欄就是用了CSS3的縫合效果做出來(lái)的,感興趣的朋友可以了解下，或許本文對(duì)你學(xué)習(xí)css3有所幫助

什么是CSS3縫合效果？請(qǐng)看網(wǎng)站（IT EXPRESS）的側(cè)邊欄，就是用了CSS3的縫合效果做出來(lái)的。

首先我們準(zhǔn)備一個(gè)不帶陰影效果的DIV：

html代碼：

復(fù)制代碼

代碼如下:

<div class="noshadow_div">一個(gè)不帶陰影效果的DIV</div>

CSS代碼：

復(fù)制代碼

代碼如下:

.noshadow_div{
height:100px;
width:500px;
padding:20px;
margin:15px;
background:#6E6E6E;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font-size:24px;
color:white;
}

效果圖：

noshadow_div

為不帶陰影效果的DIV加上虛線邊框

HTML代碼：

復(fù)制代碼

代碼如下:

<div class="noshadow_div_stitch">一個(gè)不帶陰影效果的DIV加上虛線邊框</div>

CSS代碼：

復(fù)制代碼

代碼如下:

.noshadow_div_stitch{
height:100px;
width:500px;
padding:20px;
margin:15px;
background:#6E6E6E;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font-size:24px;
color:white;
border:2pxdashedrgba(255,255,255,0.8);
}

效果圖：

noshadow_div_stitch

為加上虛線邊框的DIV加上陰影

HTML代碼：

復(fù)制代碼

代碼如下:

<div class="shadow_div_stitch">為加上虛線邊框的DIV加上陰影</div>

CSS代碼：

復(fù)制代碼

代碼如下:

.shadow_div_stitch{
height:100px;
width:500px;
padding:20px;
margin:15px;
background:#6E6E6E;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font-size:24px;
color:white;
border:2pxdashedrgba(255,255,255,0.8);
-moz-box-shadow:0004px#6E6E6E,2px1px4px4pxrgba(10,10,0,.5);
-webkit-box-shadow:0004px#6E6E6E,2px1px4px4pxrgba(10,10,0,.5);
box-shadow:0004px#6E6E6E,2px1px6px4pxrgba(10,10,0,.5);
}

效果圖：

shadow_div_stitch

以上為第一種方式實(shí)現(xiàn)縫合效果

下面開(kāi)始第二種方式

我們有一個(gè)帶實(shí)線邊框，不帶陰影效果的DIV

HTML代碼：

復(fù)制代碼

代碼如下:

<div class="noshadow_div_solid">一個(gè)不帶陰影效果的DIV加上實(shí)線邊框</div>

CSS代碼：

復(fù)制代碼

代碼如下:

.noshadow_div_solid{
height:100px;
width:500px;
padding:20px;
margin:15px;
background:#6E6E6E;
border:2pxsolidrgba(255,0,255,0.8);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font-size:24px;
color:white;
position:relative;
z-index:0;
}

效果圖：

為加上實(shí)線邊框不帶陰影效果的DIV加上偽元素::before或:before

HTML代碼：

復(fù)制代碼

代碼如下:

<div class="noshadow_div_solid_stitch">為加上實(shí)線邊框不帶陰影效果的DIV加上偽元素,通過(guò)偽元素::before展現(xiàn)出來(lái)（兼容webkit、firefox、opera）</div>

CSS代碼：

復(fù)制代碼

代碼如下:

.noshadow_div_solid_stitch{
height:100px;
width:500px;
padding:20px;
margin:15px;
background:#6E6E6E;
border:2pxsolidrgba(255,0,255,0.8);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font-size:24px;
color:white;
position:relative;
z-index:0;
}
.noshadow_div_solid_stitch:before{
border:2pxdashedrgba(255,255,255,0.8);
top:3px;
bottom:3px;
left:3px;
right:3px;
position:absolute;
z-index:-1;
position:absolute;
content:'';
}

效果圖：