使用css3 屬性如何豐富圖片樣式(圓角陰影漸層)

首頁

web前端

H5教程

使用css3 屬性如何豐富圖片樣式(圓角陰影漸層)_html5教學技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:50 PM

css3圖片屬性樣式

在css3中，直接在圖片上使用box-shadow 和 border-radius，瀏覽器並不能很好的渲染。但如果把圖片當作background-image，新增的樣式瀏覽器可以很好的渲染。我將會介紹如何使用box-shadow, border-radius 和 transition建立不同圖片樣式效果。
問題
透過查看demo能注意到，我們為第一行圖片設定了border-radius 和內嵌box-shadow。 firefox渲染了圖片的border-radius，但是沒有渲染內嵌box-shadow。 chrome和Safari兩種效果都沒有渲染。

複製程式碼

程式碼如下:

.normal img {order -webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow inset 0dow 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/s>:

變通方案

為了讓border-radius 和內嵌box-shadow能夠正常運作，我們需要把圖片轉換成background-image的方式。

動態方式

為了動態完成這項工作，我們需要藉助jquery為每個圖片添加背景圖片的包裝。下面的js程式碼為每個圖片增加了一個span的包裝，span的背景圖片路徑就是圖片的路徑。
程式碼比較簡單，我想就沒有講解的必要了。不清楚了可以直接去查jquery的api。

複製程式碼

程式碼如下:

輸出
上面的程式碼會輸出以下結果：

複製程式碼

程式碼如下:

圓圖

加入我們使用border-radius來達到圓形圖片的效果。

.circle .image-wrap {
-webkit-border-radius: 50em;
-moz-border-radius: 50em;

border-radius: 50emorder-radius: 50em;

border-radius: 50em; ;

卡片風格

下面是卡片風格的圖片，使用了多個內嵌box-shadow。

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;
}

浮雕風格
下面是浮雕效果。

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)
; 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;

柔性浮雕風格
相對於浮雕樣式，新樣式增加了1px blur屬性。

css：

複製程式碼

碼🎜>.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 05), 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,.33); 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 -112px 2px rgba(255,255,255,.3);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px; 🎜>

摳圖風格

使用內嵌box-shadow就可以實現摳圖效果。
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 4px 5px rgba(0,0,0,.6), inset 00 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;
}

變形和發光
在這個例子中我們為圖片包裝添加transition屬性，滑鼠滑過的時候，他會從圓角變為圓形。然後我們使用多個box-shadow實現發光效果。

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,5025,005, 506p ,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> border-radius: 60em;
border-radius: 60em;
}

高光效果
高光的效果是透過為元素添加 :after 偽類來實現的。

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,25,0%); >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%);
}

在這個例子中，我們將高光效果移到底部就達到倒影效果。

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-background: -moz-background: -moz-background: -moz-background 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 將高光和倒影效果組合起來。

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 .glossy-reflection . :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,755,75,255,25,255,255,2555,75,2555,752 ) 0%, rgba(255,255,255,.1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,25,00%, color. stop(100%,rgba(255,255,255,.1)));
background: linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,25,0%);
.glossy-reflection .image-wrap:after {
position: absolute;
content: ' ';
width: 100%;
height: 30px;
bot; 31px;
left: 0;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-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 topcolor, left 顏色>background: -webkit-gradient(linear, left topcolor, left 顏色(0%,rgba(230,230,230,.3)), color-stop(100%,rgba(230,230,230,0)));
background: linear-gradient(top, rgba(230,230,230%,. rgba(230,230,230,0) 100%);

}
Gaya pita
Dalam contoh ini, kami menggunakan :selepas untuk mencapai kesan pita.

css:

Salin kod

Kod adalah seperti berikut:

.tape .image-wrap {
-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.3), sisipan 0 - 1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4); 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 );
bayang kotak: 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);
lebar: 60px;
tinggi: 25px;
atas: -10px;
kiri: 50%; ,48, .2);
latar belakang: -moz-linear-gradient(atas, rgba(254,243,127,.6) 0%, rgba(240,224,.6) 100%); webkit-gradient (linear, kiri atas, kiri bawah, color-stop(0%,rgba(254,243,127,.6)), color-stop(100%,rgba(240,224,54,.6))); latar belakang: linear -gradient(atas, rgba(254,243,127,.6) 0%,rgba(240,224,54,.6) 100%); 3), 0 1px 0 rgba(0,0,0,.2);
}

Transform and Colorize

Dalam contoh ini kita gunakan :after , mencapai kesan kecerunan jejarian apabila tetikus melepasi.

css:

Salin kod

Kodnya adalah seperti berikut:

.morphing-tinting .image-wrap {

posisi: relatif;

-webkit-transition: 1s; >-webkit -border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; ; jejari sempadan: 30em; }

.pewarnaan .pembungkusan imej:selepas {

kandungan: ' '; ;

tinggi: 100%;
atas: 0;
-webkit-border-radius: 30em;
-moz-border-radius: 30em; 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))) ;
latar belakang: -moz-radial-gradient(50% 50%, bulatan, rgba(0, 0,0,0) 40px, rgba(0,0,0,1) 80px
}

Bulatan tepi bulu

Kita juga boleh Menggunakan kecerunan jejari untuk mencipta topeng untuk mencapai kesan bulu.

css:

Salin kod

Kod adalah seperti berikut:

.feather .image-wrap {
kedudukan: relatif;
-webkit-border-radius: 30em;-moz-border-radius: 30em; 30em;
}
.feather .image-wrap: selepas {

kedudukan:
kandungan: ' '; lebar: 100%; 🎜>atas : 0; kiri: 0;
latar belakang: -webkit-gradient(radial, 50% 50%, 50, 50% 50%, 70, from(rgba(255,255,255,0)), to (rgba( 255,255,255,1)));

Keserasian Pelayar

Pelaksanaan ini berfungsi dalam kebanyakan penyemak imbas yang menyokong ciri jejari sempadan, bayangan kotak, :sebelum dan :selepas (seperti Chrome, Firefox dan Safari ), kedua-duanya berfungsi dengan baik. Dalam penyemak imbas yang tidak menyokong ciri baharu, hanya imej asal akan dipaparkan.

Buat pelaksanaan anda sendiri Gunakan kelas pseudo :before dan :after untuk mencipta banyak gaya untuk imej dan anda boleh cuba mencipta kesan baharu sendiri.

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

H5和HTML5之間的連接：相似性和差異Apr 24, 2025 am 12:01 AM

H5和HTML5是不同的概念：HTML5是HTML的一個版本，包含新元素和API；H5是基於HTML5的移動應用開發框架。 HTML5通過瀏覽器解析和渲染代碼，H5應用則需要容器運行並通過JavaScript與原生代碼交互。

H5代碼的基礎：密鑰元素及其目的Apr 23, 2025 am 12:09 AM

HTML5的關鍵元素包括、、、、、等，用於構建現代網頁。 1.定義頭部內容，2.用於導航鏈接，3.表示獨立文章內容，4.組織頁面內容，5.展示側邊欄內容，6.定義頁腳，這些元素增強了網頁的結構和功能性。

HTML5和H5：了解常見用法Apr 22, 2025 am 12:01 AM

HTML5和H5沒有區別，H5是HTML5的簡稱。 1.HTML5是HTML的第五個版本，增強了網頁的多媒體和交互功能。 2.H5常用於指代基於HTML5的移動網頁或應用，適用於各種移動設備。

HTML5：現代網絡的基礎（H5）Apr 21, 2025 am 12:05 AM

HTML5是超文本標記語言的最新版本，由W3C標準化。 HTML5引入了新的語義化標籤、多媒體支持和表單增強，提升了網頁結構、用戶體驗和SEO效果。 HTML5引入了新的語義化標籤，如、、、等，使網頁結構更清晰，SEO效果更好。 HTML5支持多媒體元素和，無需第三方插件，提升了用戶體驗和加載速度。 HTML5增強了表單功能，引入了新的輸入類型如、等，提高了用戶體驗和表單驗證效率。

H5代碼：編寫清潔有效的HTML5Apr 20, 2025 am 12:06 AM

如何寫出乾淨高效的HTML5代碼？答案是通過語義化標籤、結構化代碼、性能優化和避免常見錯誤。 1.使用語義化標籤如、等，提升代碼可讀性和SEO效果。 2.保持代碼結構化和可讀性，使用適當縮進和註釋。 3.優化性能，通過減少不必要的標籤、使用CDN和壓縮代碼。 4.避免常見錯誤，如標籤未閉合，確保代碼有效性。