App/網頁截圖加圓角投影展示
給產品介紹頁、作品集裡的界面截圖加上圓角和柔和陰影,模擬真實設備展示效果,讓截圖看起來更精緻專業。
上手路徑
不需要安裝任何軟體,全程在網頁裡完成,畫面實時更新。
點擊選擇或直接把圖片拖進網頁,支持 JPG、PNG、WebP、GIF,單張不超過 20MB,每次只處理一張。
拖動圓角滑塊實時調整四角弧度,畫面立即更新預覽效果。
按需開啟邊框和陰影,設置各自的顏色、寬度、透明度和範圍,還可以設置畫布背景顏色。
確認效果滿意後點擊下載,圖片會按當前設置重新生成並保存到本地。
疑難排查
不支持。這個工具定位為單圖精修,圓角半徑、陰影強弱是否合適,通常需要針對該圖片的具體比例和用途逐張預覽確認,比如方形截圖和長條形海報需要的圓角比例明顯不同,套用同一套參數容易出現效果不協調,所以設計為單張圖片精細調節的工具。如果需要處理多張圖片,建議逐張打開分別調整。
完全在你當前設備的瀏覽器裡完成,實時預覽藉助瀏覽器原生的 CSS 邊框、圓角、陰影樣式即時渲染,下載時再用 Canvas 按相同參數重新繪製生成最終圖片,全程不會把原圖上傳到任何服務器。
因為陰影需要向外擴散一定範圍才能看清投影效果,如果畫布和原圖一樣大,陰影會被直接裁掉看不到;所以匯出時會根據當前設置的陰影模糊範圍、投影距離和邊框寬度自動向四周擴展畫布,多出的區域按你選擇的背景顏色填充(或保持透明),確保陰影完整顯示,不會被裁切。
JPG 格式本身不支持透明通道,選擇透明背景但原圖是 JPG 格式時,透明區域會自動改用白色填充,這是 JPG 格式的固有限制,不是處理出錯。如果需要真正的透明背景,請上傳 PNG 或 WebP 格式的圖片,處理後匯出結果就會保留透明背景。
都是按圖片自身寬高的比例計算,而不是固定像素值,這樣不管上傳的圖片分辨率是大是小,同樣的滑塊數值都能得到視覺比例一致的效果,預覽時看到的效果和下載後生成的最終圖片效果也完全一致。
處理本質是重新繪製並編碼:原圖如果帶透明背景,透明區域在圓角以外的部分仍會保留(除非選擇了不透明的背景顏色進行填充)。原圖的 EXIF 拍攝參數、位置等元數據在重新編碼後不會保留,如果需要專門查看或清除 EXIF,可以使用「EXIF 清理」工具。
效果渲染和匯出全程在瀏覽器本地完成,圖片不會經過任何服務器
三種效果可以單獨使用也可以疊加組合,覆蓋大部分精修展示需求
拖動滑塊畫面立即更新,確認滿意後再下載,不用反覆試錯
不用註冊、不用付費,也沒有隱藏的使用次數限制
搭配建議
不同場景適合不同的參陣列合,先參考這份速查表再微調,比從零嘗試更快找到滿意的效果。
| 效果組合 | 推薦參數範圍 | 適合場景 |
|---|---|---|
| 輕微圓角 + 柔和陰影 | 圓角 8%~15%,陰影透明度 25%~40%,模糊範圍較大、投影距離較小 | App/網頁截圖展示,模擬懸浮卡片效果 |
| 大圓角 + 無陰影 | 圓角 25%以上,不啟用陰影 | 頭像、圖標類圖片,追求圓潤可愛的視覺風格 |
| 細邊框 + 無陰影或輕陰影 | 邊框寬度較窄,顏色接近背景色或白色 | 電商產品圖,在白底背景上增加邊界感 |
| 直角 + 明顯陰影 | 圓角 0%,陰影透明度 40%以上,投影距離較大 | 強調立體懸浮感的宣傳圖、海報元素 |
以上僅為常見搭配思路,實際效果和圖片本身的構圖、背景顏色有關,建議在預覽區拖動滑塊反覆對比,找到最符合當前圖片的參陣列合。
技術說明
拖動滑塊時,預覽畫面藉助瀏覽器原生的 CSS 圓角、邊框、陰影樣式即時渲染;點擊下載時,會用瀏覽器 Canvas 繪圖接口按完全相同的比例參數重新繪製並編碼成圖片檔案,確保下載結果和預覽效果保持一致,全程在你的裝置本地完成,不經過任何服務器。
啟用陰影或較寬的邊框後,效果需要向圖片四周擴展一定範圍才能完整顯示,不會被裁切;匯出時畫布會根據當前的陰影模糊範圍、投影距離和邊框寬度自動計算需要擴展的邊距,多出的區域按選擇的背景顏色填充或保持透明。不需要陰影和邊框時(都設為關閉或數值為 0),匯出圖片尺寸會和原圖保持一致。