用CSS3實現圖像風格 · Web前端-關注HTML5與CSS3

? ? ? 譯自：[http://webdesignerwall.com/tutorials/css3-image-styles](http://webdesignerwall.com/tutorials/css3-image-styles) ? ? ??轉載請標明出處：蔣宇捷的博客([http://blog.csdn.net/hfahe](http://blog.csdn.net/hfahe))? ? ? ? - - - - - - 當在圖像元素上直接使用CSS3內陰影或者圓角邊框時，瀏覽器對于CSS樣式的渲染并不完美。但是，如果圖像作為背景圖像使用時，你可以為它添加任何樣式，而且可以實現完美的渲染。Darcy Clarke和我一起編寫了一個如何使用jQuery來動態創建完美圓角邊框的快速教程。今天我要重啟這個話題，向你展示使用CSS的背景圖像技巧我們還可以做多少事情。我將向你展示如何使用盒陰影、圓角邊框和轉換來創建不同的圖像樣式。 [**![](https://box.kancloud.cn/2016-08-02_57a05bd59790a.gif) 查看演示**](http://webdesignerwall.com/demo/css3-image-styles/) **問題（見[演示](http://webdesignerwall.com/demo/css3-image-styles/)）** 查看演示，你會發現第一排的圖像應用了圓角邊框和內陰影。Firefox在圖片元素上支持圓角邊框，但是不支持內陰影的渲染。Chrome和Safari完全不支持圓角邊框和內陰影的渲染。 ![](https://box.kancloud.cn/2016-08-09_57a9a29d8e9fe.jpg) **解決方案** 要使用圓角邊框和內陰影，解決方案是把所需的圖像設置為背景圖像。 ![](https://box.kancloud.cn/2016-08-09_57a9a29da409f.png) **動態的方式** 要采用動態的方式實現，你可以使用jQuery來將每一個圖像元素動態的包裝為背景圖像。如下的jQuery代碼使用span標簽來包裝所有的圖像，并且將圖像應用為背景圖像（jQuery代碼來自Darcy Clarke）。 ~~~ <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> ~~~ *輸出* 上面的代碼將輸入如下的HTML代碼： ~~~ <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> ~~~ **圓形圖像（見[演示](http://webdesignerwall.com/demo/css3-image-styles/)）** 現在圖片已經被應用為背景圖像，你幾乎可以為它添加任何樣式。如下是一個用圓角邊框創建的簡單圓形圖像。如果你還不熟悉CSS3，請閱讀我對CSS3的[基礎教程](http://webdesignerwall.com/tutorials/the-basics-of-css3)。 ![](https://box.kancloud.cn/2016-08-09_57a9a29db8bb4.jpg) **CSS** ~~~ .circle .image-wrap { -webkit-border-radius: 50em; -moz-border-radius: 50em; border-radius: 50em; } ~~~ **卡片風格（見[演示](http://webdesignerwall.com/demo/css3-image-styles/)）** 如下是一個用多內陰影值創建的卡片圖像樣式。 ![](https://box.kancloud.cn/2016-08-09_57a9a29dec8f0.jpg) **CSS** ~~~ .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; } ~~~ **浮雕風格（見[演示](http://webdesignerwall.com/demo/css3-image-styles/)）** 做一些調整，我可以將卡片樣式變成浮雕樣式。 ![](https://box.kancloud.cn/2016-08-09_57a9a29e0dfdf.jpg) **CSS** ~~~ .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; } ~~~ **軟浮雕風格（見[演示](http://webdesignerwall.com/demo/css3-image-styles/)）** 這幾乎和浮雕樣式相同，我只加了1個像素的模糊。 ![](https://box.kancloud.cn/2016-08-09_57a9a29e23819.jpg) **CSS** ~~~ .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; } ~~~ **剪貼畫風格（見[演示](http://webdesignerwall.com/demo/css3-image-styles/)）** 再次通過對內陰影的調整，我可以讓它看起來像一個剪貼畫效果。 ![](https://box.kancloud.cn/2016-08-09_57a9a29e384b0.jpg) **CSS** ~~~ .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; } ~~~ **變形和發光（見[演示](http://webdesignerwall.com/demo/css3-image-styles/)）** 在這個例子匯總，我為圖像的包裝元素添加了transition。當鼠標滑過，它會從圓角邊框變為圓形并添加發光的效果。發光效果采用多盒陰影值實現。 ![](https://box.kancloud.cn/2016-08-09_57a9a29e4d92e.jpg) **CSS** ~~~ .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; } ~~~ **光澤覆蓋（見[演示](http://webdesignerwall.com/demo/css3-image-styles/)）** 我們采用:after偽類元素實現如下的光澤漸變覆蓋效果。 ![](https://box.kancloud.cn/2016-08-09_57a9a29e66dca.jpg) **CSS** ~~~ .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%); } ~~~ **投影（見[演示](http://webdesignerwall.com/demo/css3-image-styles/)）** 在這個例子中，我將覆蓋漸變換到底部來創建投影效果。 ![](https://box.kancloud.cn/2016-08-09_57a9a29e7aa75.jpg) **CSS** ~~~ .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; } ~~~ **光澤和投影（見[演示](http://webdesignerwall.com/demo/css3-image-styles/)）** 在這個示例中，我將:before和:after合并，用來創建帶投影效果的光澤頭像。 ![](https://box.kancloud.cn/2016-08-09_57a9a29e9374a.jpg) **CSS** ~~~ .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%); } ~~~ **磁帶風格（見[演示](http://webdesignerwall.com/demo/css3-image-styles/)）** 這里使用:after來在圖像的上部創建磁帶式的漸變。 ![](https://box.kancloud.cn/2016-08-09_57a9a29eaa63f.jpg) **CSS** ~~~ .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); } ~~~ **變形和上色（見[演示](http://webdesignerwall.com/demo/css3-image-styles/)）** 在如下的示例里，我使用:after元素在鼠標滑過時創建徑向漸變。 ![](https://box.kancloud.cn/2016-08-09_57a9a29ec1095.jpg) **CSS** ~~~ .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); } ~~~ **羽毛邊圈（見[演示](http://webdesignerwall.com/demo/css3-image-styles/)）** 徑向漸變還可以作為遮罩使用來創建圓形的羽毛效果，如下所示。 ![](https://box.kancloud.cn/2016-08-09_57a9a29ed9454.jpg) **CSS** ~~~ .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); } ~~~ **瀏覽器支持** 這個技巧幾乎可以工作在任何支持圓角邊框、盒陰影、:after和:before的瀏覽器上（例如Chrome、Firefox和Safari）。不支持的瀏覽器會顯示沒有任何樣式的圖像。 **使用你的創造力** 正如你看到的一樣，使用:before和:after偽元素你幾乎可以創建任何圖像風格。如果你有更富有創造力的圖像風格，請在評論中分享。