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

秋天風景發表於2012-09-10
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實現的精美的邊框效果【附演示和原始碼】

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

作者：山邊小溪

主站：yyyweb.com 記住啦：）

歡迎任何形式的轉載，但請務必註明出處。


相關文章