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”等屬性製作的圖片效果。

安卓.9圖片製作
2018-04-13
安卓
PS製作圓角圖片
2024-03-14
Canvas + JavaScript 製作圖片粒子效果
2018-02-26
CanvasJavaScript
iOS 顏色製作背景圖片
2015-09-06
iOS
離屏Canvas——製作水印圖片
2015-08-24
Canvas
android:製作 Nine-Patch 圖片
2016-01-08
Android
Android 製作.9.png圖片
2014-07-28
Android
android 9PNG圖片製作
2014-07-29
Android
用ps製作動態圖片教程
2012-03-20
分享好用的小紅書圖片製作軟體，輕鬆製圖
2022-03-21
[譯] 給破碎圖片新增樣式
2020-01-28
CSS 設定<img>圖片樣式
2018-10-01
CSS
PS教程：利用圖層樣式製作一個WEB登入框
2015-11-20
Web
網店logo自己製作，電商產品圖片如何快速製作
2021-10-18
Go
WidsMob Montage for Mac(蒙太奇圖片製作)
2021-10-10
Mac
vue前端製作圖片，並下載（canvase）
2018-05-22
Vue前端Canvas
線上圖片製作網站哪個好 PS圖片處理教程
2018-12-04
網站
場所位置圖怎麼製作，怎樣製作自己需要的區域地圖
2021-07-29
地圖
室內地圖製作軟體有哪些？怎樣製作自己需要的地圖？
2023-01-31
地圖
PPT怎麼製作漸變UI圖示？PPT扁平化圖示圖片的製作方法
2020-09-24
UI
圖形驗證碼圖片樣式設定
2023-04-21
shopify 屬性新增圖片及樣式
2019-03-21
借用圖文智慧排版製作精美的鎖屏圖片
2021-01-28
怎樣在電子遊戲裡製作自然紀錄片？
2020-05-19
遊戲
利用純 CSS3 定製單選/多選框樣式
2018-12-06
CSSS3
css3圖片變灰
2017-02-20
CSSS3
【BootStrap】圖片樣式、輔助類樣式和CSS元件 -附原始碼
2017-09-07
bootCSS元件原始碼
Android客製化------開機logo之ppm圖片製作
2017-11-01
AndroidGo
馬賽克圖片製作軟體：TurboMosaic啟用
2022-11-08
AI
使用css3實現思維導圖樣式示例
2018-12-18
CSSS3
如何製作企業宣傳片：企業宣傳片製作之道
2024-03-01
影片片頭如何製作，分享套用樣式的方法
2021-03-16
CSS3圖片旋轉效果
2018-08-08
CSSS3
CSS3圖片拉近放大效果
2018-09-12
CSSS3
css3 製作圓環進度條
2019-02-16
CSSS3
製作一個複雜通用的圖片上傳介面
2021-09-09
TurboMosaic for Mac 蒙太奇馬賽克圖片製作軟體
2022-06-11
AIMac
地圖製作
2015-01-06
地圖

CSS3製作圖片樣式

解決方法：

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

一、浮雕樣式

相關文章