使用css3 屬性如何豐富圖片樣式(圓角 陰影 漸變)
發(fā)布時(shí)間：2012-11-22 10:48:20 作者：佚名 
我要評(píng)論
我要評(píng)論把圖片作為background-image，添加的樣式瀏覽器可以很好的渲染,我將會(huì)介紹如何使用box-shadow, border-radius 和 transition創(chuàng)建不同圖片樣式(圓角 陰影 漸變)等效果
在css3中，直接在圖片上使用box-shadow 和 border-radius，瀏覽器并不能很好的渲染。但是如果把圖片作為background-image，添加的樣式瀏覽器可以很好的渲染。我將會(huì)介紹如何使用box-shadow, border-radius 和 transition創(chuàng)建不同圖片樣式效果。
問(wèn)題
通過(guò)查看demo能注意到，我們?yōu)榈谝恍袌D片設(shè)置了border-radius 和 內(nèi)嵌box-shadow。firefox渲染了圖片的border-radius，但是沒(méi)有渲染內(nèi)嵌box-shadow。chrome和Safari兩種效果都沒(méi)有渲染。
復(fù)制代碼
代碼如下:.normal img {
border: solid 5px #000;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: inset 0 1px 5px rgba(0,0,0,.5);
-moz-box-shadow: inset 0 1px 5px rgba(0,0,0,.5);
box-shadow: inset 0 1px 5px rgba(0,0,0,.5);
}
firefox效果：
chrome/safari
變通方案
為了使border-radius 和 內(nèi)嵌box-shadow能夠正常工作，我們需要把圖片轉(zhuǎn)換成background-image的方式。
動(dòng)態(tài)方式
為了動(dòng)態(tài)完成這一工作，我們需要借助jquery為每一個(gè)圖片添加背景圖片的包裝。下面的js代碼為每一個(gè)圖片添加了一個(gè)span的包裝，span的背景圖片路徑就是圖片的路徑。
代碼比較簡(jiǎn)單，我想就沒(méi)有講解的必要了。不清楚了可以直接去查jquery的api。
復(fù)制代碼
代碼如下:<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("img").load(function() {
$(this).wrap(function(){
return '<span class="image-wrap ' + $(this).attr('class') + '" style="position:relative; display:inline-block; background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';
});
$(this).css("opacity","0");
});
});
</script>
輸出
上面的代碼會(huì)輸出如下結(jié)果：
復(fù)制代碼
代碼如下:<span class="image-wrap " style="position:relative; display:inline-block; background:url(image.jpg) no-repeat center center; width: 150px; height: 150px;">
<img src="image.jpg" style="opacity: 0;">
</span>
圓形圖片
添加我們使用border-radius來(lái)實(shí)現(xiàn)圓形圖片的效果，效果如下：
css：
復(fù)制代碼
代碼如下:.circle .image-wrap {
-webkit-border-radius: 50em;
-moz-border-radius: 50em;
border-radius: 50em;
}
卡片風(fēng)格
下面是卡片風(fēng)格的圖片，使用了多個(gè)內(nèi)嵌box-shadow。
css：
復(fù)制代碼
代碼如下:.card .image-wrap {
-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);
-moz-box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);
box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
浮雕風(fēng)格
下面是浮雕效果。
css：
復(fù)制代碼
代碼如下:.embossed .image-wrap {
-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3);
-moz-box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3);
box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
柔性浮雕風(fēng)格
相對(duì)于浮雕樣式，新樣式添加了1px blur屬性。
css：
復(fù)制代碼
代碼如下:.soft-embossed .image-wrap {
-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,1), inset 0 2px 1px rgba(255,255,255,.5), inset 0 -9px 2px rgba(0,0,0,.6), inset 0 -12px 2px rgba(255,255,255,.3);
-moz-box-shadow: inset 0 0 4px rgba(0,0,0,1), inset 0 2px 1px rgba(255,255,255,.5), inset 0 -9px 2px rgba(0,0,0,.6), inset 0 -12px 2px rgba(255,255,255,.3);
box-shadow: inset 0 0 4px rgba(0,0,0,1), inset 0 2px 1px rgba(255,255,255,.5), inset 0 -9px 2px rgba(0,0,0,.6), inset 0 -12px 2px rgba(255,255,255,.3);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
摳圖風(fēng)格
使用內(nèi)嵌box-shadow就可以實(shí)現(xiàn)摳圖效果。
css：
復(fù)制代碼
代碼如下:.cut-out .image-wrap {
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 4px 5px rgba(0,0,0,.6), inset 0 1px 0 rgba(0,0,0,.6);
-moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 4px 5px rgba(0,0,0,.6), inset 0 1px 0 rgba(0,0,0,.6);
box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 4px 5px rgba(0,0,0,.6), inset 0 1px 0 rgba(0,0,0,.6);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
變形和發(fā)光
在這個(gè)例子中我們?yōu)閳D片包裝添加transition屬性，鼠標(biāo)滑過(guò)的時(shí)候，他會(huì)從圓角變?yōu)閳A形。然后我們使用多個(gè)box-shadow實(shí)現(xiàn)發(fā)光效果。
css：
復(fù)制代碼
代碼如下:.morphing-glowing .image-wrap {
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.morphing-glowing .image-wrap:hover {
-webkit-box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
-moz-box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
-webkit-border-radius: 60em;
-moz-border-radius: 60em;
border-radius: 60em;
}
高光效果
高光的效果是通過(guò)為元素添加 :after 偽類實(shí)現(xiàn)的。
css：
復(fù)制代碼
代碼如下:.glossy .image-wrap {
-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);
-moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);
box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.glossy .image-wrap:after {
position: absolute;
content: ' ';
width: 100%;
height: 50%;
top: 0;
left: 0;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,.1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,.1)));
background: linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,.1) 100%);
}
倒影效果
在這個(gè)例子中，我們將高光效果移到底部就實(shí)現(xiàn)倒影效果。
css：
復(fù)制代碼
代碼如下:.reflection .image-wrap:after {
position: absolute;
content: ' ';
width: 100%;
height: 30px;
bottom: -31px;
left: 0;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
background: -moz-linear-gradient(top, rgba(0,0,0,.3) 0%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,.3)), color-stop(100%,rgba(255,255,255,0)));
background: linear-gradient(top, rgba(0,0,0,.3) 0%,rgba(255,255,255,0) 100%);
}
.reflection .image-wrap:hover {
position: relative;
top: -8px;
}
高光和倒影
本例我們使用:before 和 :after 將高光和倒影效果組合起來(lái)。
css：
復(fù)制代碼
代碼如下:.glossy-reflection .image-wrap {
-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6);
-moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6);
box-shadow: inset 0 -1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6);
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.glossy-reflection .image-wrap:before {
position: absolute;
content: ' ';
width: 100%;
height: 50%;
top: 0;
left: 0;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,.1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,.1)));
background: linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,.1) 100%);
}
.glossy-reflection .image-wrap:after {
position: absolute;
content: ' ';
width: 100%;
height: 30px;
bottom: -31px;
left: 0;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
background: -moz-linear-gradient(top, rgba(230,230,230,.3) 0%, rgba(230,230,230,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(230,230,230,.3)), color-stop(100%,rgba(230,230,230,0)));
background: linear-gradient(top, rgba(230,230,230,.3) 0%,rgba(230,230,230,0) 100%);
}
膠帶風(fēng)格
在這個(gè)例子中，我們使用:after來(lái)實(shí)現(xiàn)膠帶的效果。
css：
復(fù)制代碼
代碼如下:.tape .image-wrap {
-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: inset 0 0 2px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
box-shadow: inset 0 0 2px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
}
.tape .image-wrap:after {
position: absolute;
content: ' ';
width: 60px;
height: 25px;
top: -10px;
left: 50%;
margin-left: -30px;
border: solid 1px rgba(137,130,48,.2);
background: -moz-linear-gradient(top, rgba(254,243,127,.6) 0%, rgba(240,224,54,.6) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,243,127,.6)), color-stop(100%,rgba(240,224,54,.6)));
background: linear-gradient(top, rgba(254,243,127,.6) 0%,rgba(240,224,54,.6) 100%);
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 0 rgba(0,0,0,.2);
}
變形和著色
在這個(gè)例子中，我們?cè)谠厣鲜褂?after，當(dāng)鼠標(biāo)進(jìn)過(guò)的時(shí)候?qū)崿F(xiàn)徑向漸變的效果。
css：
復(fù)制代碼
代碼如下:.morphing-tinting .image-wrap {
position: relative;
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.morphing-tinting .image-wrap:hover {
-webkit-border-radius: 30em;
-moz-border-radius: 30em;
border-radius: 30em;
}
.morphing-tinting .image-wrap:after {
position: absolute;
content: ' ';
width: 100%;
height: 100%;
top: 0;
left: 0;
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
-webkit-border-radius: 30em;
-moz-border-radius: 30em;
border-radius: 30em;
}
.morphing-tinting .image-wrap:hover:after {
background: -webkit-gradient(radial, 50% 50%, 40, 50% 50%, 80, from(rgba(0,0,0,0)), to(rgba(0,0,0,1)));
background: -moz-radial-gradient(50% 50%, circle, rgba(0,0,0,0) 40px, rgba(0,0,0,1) 80px);
}
羽化邊緣圓形
我們同樣可以使用徑向漸變產(chǎn)生遮罩，實(shí)現(xiàn)羽化的效果。
css：
復(fù)制代碼
代碼如下:.feather .image-wrap {
position: relative;
-webkit-border-radius: 30em;
-moz-border-radius: 30em;
border-radius: 30em;
}
.feather .image-wrap:after {
position: absolute;
content: ' ';
width: 100%;
height: 100%;
top: 0;
left: 0;
background: -webkit-gradient(radial, 50% 50%, 50, 50% 50%, 70, from(rgba(255,255,255,0)), to(rgba(255,255,255,1)));
background: -moz-radial-gradient(50% 50%, circle, rgba(255,255,255,0) 50px, rgba(255,255,255,1) 70px);
}
瀏覽器兼容性
這種實(shí)現(xiàn)方式在大多數(shù)支持border-radius, box-shadow, :before and :after特性的瀏覽器中（例如Chrome, Firefox 和 Safari），都能很好的工作。在不支持新特性的瀏覽器中，只會(huì)顯示原始圖片。
創(chuàng)造你自己的實(shí)現(xiàn)
借助:before 和:after偽類能為圖片創(chuàng)造很多種樣式，你可以自己嘗試創(chuàng)建出新的效果。
相關(guān)文章
CSS3實(shí)現(xiàn)圓角、陰影、透明效果并兼容各大瀏覽器
圓角、陰影、透明的實(shí)現(xiàn)方法有很多，之前的獲取比較復(fù)雜，用CSS3就方便很多了，而且對(duì)瀏覽器的支持性也比較好，下面簡(jiǎn)單為大家介紹下2014-08-08- 想做個(gè)頁(yè)面用到css3的圓角和陰影效果，但ie瀏覽器不支持，之前也聽(tīng)說(shuō)有插件可以實(shí)現(xiàn)，周六在網(wǎng)上找到了一個(gè)方法，原文如下： 但凡是前端工程師，都知道IE6，IE7，IE8不支2013-07-02
- 這篇文章主要介紹了css3圓角邊框和邊框陰影示例,需要的朋友可以參考下2014-05-05
- 這篇文章主要介紹了使用CSS3實(shí)現(xiàn)圓角,陰影,透明的方法和示例代碼分析，非常的簡(jiǎn)單實(shí)用，這里推薦給小伙伴們。2014-12-23