CSS3製作圖片樣式

蓦然JL發表於2024-04-01

問題：

如果在img上直接使用CSS3的border-radius和box-shadow應用在圖片，瀏覽器並不會完全顯示。前面在《jQuery和CSS3給圖片製作圓角》中說過其解決方法，就是把圖片作為背景圖片，這樣我們就可以應用任何樣式來修飾圖片，而且此時瀏覽器也會完美的呈現出來。

解決方法：

要讓瀏覽器能正常渲染影像的圓角和內陰影效果，你需要將影像轉為背景影像來渲染。

<div style="background:url(image.jpg)" no-repeat center center;width:150px;height:150px></div>

一、浮雕樣式

CSS3製作圖片樣式

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

二、軟浮雕效果

這也是一種浮雕效果，只是這個效果增加了一點模糊效果

CSS3製作圖片樣式

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

三、剪影效果

同樣是box-shadow的inset的值變化，但此例看上去像一種剪影效果。

CSS3製作圖片樣式

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

四、變形和發光效果

在這個效果中，增加了CSS3的transition效果，當你的滑鼠懸停在圖片上時，圖片會從一個圓角圖片轉圓形圖片，並會發光。使用多重box-shadow來模仿發光效果。

CSS3製作圖片樣式

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

五、圖片漸變效果

這個效果，在元素的偽類上增加了一個漸變的效果。

CSS3製作圖片樣式

.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: -webkit-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,.1) 100%);
			background: -o-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,.1) 100%);
		}

六、倒影效果

使用偽類製作了一個倒影效果，並應用hover改變其位置。

CSS3製作圖片樣式

.reflection .image-wrap {
			-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.5);
			-moz-box-shadow: inset 0 0 1px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.5);
			box-shadow: inset 0 0 1px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.5);
			-webkit-transition: .5s;
			-moz-transition: .5s;
			transition: .5s;
			-webkit-border-radius: 20px;
			-moz-border-radius: 20px;
			border-radius: 20px;
			}
			.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;
			}

七、發光和倒影效果

這個效果使用了偽類建立了一個漸變加倒影影像的效果。

CSS3製作圖片樣式

.glossy-reflection {
			background: #000;
			padding: 20px 40px 50px;
			color: #fff;
			-webkit-border-radius: 20px;
			-moz-border-radius: 20px;
			border-radius: 20px;
			}
			.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%);
			}

八、變形和著色效果

這個效果使用了徑向漸變和transition，以及偽類製作一種變形和著色效果，當滑鼠懸停在圖片上時，圖片會變成圓形，並著上另一種顏色。

CSS3製作圖片樣式

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

九、羽化效果

CSS3製作圖片樣式

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

小結：上面就是Web Designer Wall在《CSS3 Image Styles 》一文中給我們帶來的十二種使用CSS3的border-radius、box-shadow、rgba、transition、gradient以及偽類“:before”和“:after”等屬性製作的圖片效果。

GIF動圖怎麼製作？GIF圖片製作
2023-05-19
PS製作圓角圖片
2024-03-14
安卓.9圖片製作
2018-04-13
安卓
圖片馬製作及利用方式
2024-10-29
WidsMob Montage for Mac(蒙太奇圖片製作)
2021-10-10
Mac
CSS 設定<img>圖片樣式
2018-10-01
CSS
[譯] 給破碎圖片新增樣式
2020-01-28
使用css製作滑鼠經過圖片時，放大圖片1.5倍
2024-12-10
CSS
【傳智播客上海校區】PS製作牛仔布圖示-圖層樣式製造圖示
2018-04-16
網店logo自己製作，電商產品圖片如何快速製作
2021-10-18
Go
vue前端製作圖片，並下載（canvase）
2018-05-22
Vue前端Canvas
圖形驗證碼圖片樣式設定
2023-04-21
shopify 屬性新增圖片及樣式
2019-03-21
PPT怎麼製作漸變UI圖示？PPT扁平化圖示圖片的製作方法
2020-09-24
UI
分享好用的小紅書圖片製作軟體，輕鬆製圖
2022-03-21
利用純 CSS3 定製單選/多選框樣式
2018-12-06
CSSS3
場所位置圖怎麼製作，怎樣製作自己需要的區域地圖
2021-07-29
地圖
室內地圖製作軟體有哪些？怎樣製作自己需要的地圖？
2023-01-31
地圖
借用圖文智慧排版製作精美的鎖屏圖片
2021-01-28
使用css3實現思維導圖樣式示例
2018-12-18
CSSS3
線上圖片製作網站哪個好 PS圖片處理教程
2018-12-04
網站
CSS3圖片拉近放大效果
2018-09-12
CSSS3
CSS3圖片旋轉效果
2018-08-08
CSSS3
UWP WinUI 製作一個路徑向量圖示按鈕樣式入門
2024-07-07
UI
電商圖片線上製作，可摳圖可寫文案
2024-08-30
馬賽克圖片製作軟體：TurboMosaic啟用
2022-11-08
AI
怎樣在電子遊戲裡製作自然紀錄片？
2020-05-19
遊戲
如何製作企業宣傳片：企業宣傳片製作之道
2024-03-01
CSS3繪製圖形圖案效果
2018-07-20
CSSS3
jQuery和css3側邊欄滑出式圖片介紹外掛
2024-12-09
jQueryCSSS3
宣傳片製作技巧
2018-05-13
影片片頭如何製作，分享套用樣式的方法
2021-03-16
TurboMosaic for Mac 蒙太奇馬賽克圖片製作軟體
2022-06-11
AIMac
製作一個複雜通用的圖片上傳介面
2021-09-09
css3 製作圓環進度條
2019-02-16
CSSS3
win10怎麼複製圖片的文字_win10怎樣把圖片上的文字複製下來
2019-12-12
Win10
CSS3 設定多個背景圖片
2018-05-26
CSSS3
Dreamweaver製作滑鼠經過圖片漸漸變暗效果教程
2018-10-31

CSS3製作圖片樣式

解決方法：

要讓瀏覽器能正常渲染影像的圓角和內陰影效果，你需要將影像轉為背景影像來渲染。

一、浮雕樣式

相關文章