45個純 CSS 實現的精美邊框效果【附線上示範和源碼】【下篇】

　　邊框效果常用來給圖片添加照片效果或用於增強頁面內容片斷的整體性，在一些團購網站和使用瀑布流布局的網站也經常會使用邊框效果。在以前，簡單的邊框效果使用 CSS 可以輕鬆實現，但是用到陰影、彎曲和旋轉等複雜效果的時候，我們只能使用圖片來實現。如今藉助 CSS3 的圓角、陰影和旋轉特性，我們完全可以使用純 CSS 代碼實現精美的邊框效果。

　　下面展示的都是精心編寫的 CSS 邊框效果示範，相信您一定會有收穫！（由於使用了 jsFiddle 進行效果示範，頁面載入有點慢，請稍等一會。如果無法顯示，請重新整理一下頁面，Chrome 瀏覽器效果最佳！）。

　　推薦閱讀：45個純 CSS 實現的精美邊框效果【附源碼】【上篇】

Nice Box By Simonpicos

Glosy Boxes By Bartos Lazarski

CSS3 Elegant Box By Simonpicos

Gray Box By Web-Gate & Luky_vj

CSS3 Frame Box By Web-Gate & Luky_vj

CSS3 Gradient Background By Kushagra Agarwal

Page Curl Box Shadow By Pixleight

CSS-Only Pinterest Style By Kushagra Agarwal

Fake border gradient By Christophe Gourmelon

Stacked Papers Using box-shadow By Anas Nakawa

CSS3 Lined Paper By Taufik Nurrohman

CSS3 Notebook Paper By CSS Creations

Single Tag Heading Style (Folded) By dossatack

Single Tag Heading Style (Folded) By Kushagra Agarwal

Slick Border Gradients By David Higgins

Slick Border Gradients By Michael Parenteau

Slick Border Gradients By Chris Coyier

Pure CSS folded-corner effect By Nicolas Gallagher

Sliding Doors By CSS Creations

 

您可能還喜歡

 

• 45個純 CSS 實現的精美邊框效果【上篇】
• 23個純 CSS3 打造的精美 LOGO 圖案
• 推薦35款精緻的CSS3和HTML5網頁模板
• 12款高品質的免費 CSS 網站模板下載
• 15個使用CSS3製作的漂亮作品展示網站

 

本文連結：45個純CSS實現的精美的邊框效果【附示範和源碼】

編譯來源：夢想天空 ◆ 關注前端開發技術 ◆ 分享網頁設計資源