45个纯 CSS 实现的精美边框效果【附演示和源码】【下篇】

痛定思痛。 2023-06-02 15:56 3阅读 0赞

边框效果常用来给图片添加照片效果或用于增强页面内容片断的整体性，在一些团购网站和使用瀑布流布局的网站也经常会使用边框效果。在以前，简单的边框效果使用 [**CSS**][CSS] 可以轻松实现，但是用到阴影、弯曲和旋转等复杂效果的时候，我们只能使用图片来实现。如今借助 [**CSS3**][CSS] 的圆角、阴影和旋转特性，我们完全可以使用纯 [**CSS**][CSS] 代码实现精美的边框效果。

下面展示的都是精心编写的 CSS 边框效果演示，相信您一定会有收获！（由于使用了 jsFiddle 进行效果演示，页面加载有点慢，请稍等一会。如果无法显示，请刷新一下页面，Chrome 浏览器效果最佳！）。

推荐阅读：[45个纯 CSS 实现的精美边框效果【附源码】【上篇】][45_ CSS][  
][45_ CSS]

#### Nice Box By Simonpicos ####

style="width: 100%; height: 500px;" src="http://jsfiddle.net/ShockFamily/NxYX3/embedded/result,html,css" width="320" height="240">

#### Glosy Boxes By Bartos Lazarski ####

style="width: 100%; height: 500px;" src="http://jsfiddle.net/ShockFamily/NRjdK/4/embedded/result,html,css" width="320" height="240">

#### CSS3 Elegant Box By Simonpicos ####

style="width: 100%; height: 500px;" src="http://jsfiddle.net/ShockFamily/XMC27/16/embedded/result,html,css" width="320" height="240">

#### Gray Box By Web-Gate & Luky\_vj ####

style="width: 100%; height: 500px;" src="http://jsfiddle.net/ShockFamily/Z8YzN/embedded/result,html,css" width="320" height="240">

#### CSS3 Frame Box By Web-Gate & Luky\_vj ####

style="width: 100%; height: 500px;" src="http://jsfiddle.net/ShockFamily/qQy7J/embedded/result,html,css" width="320" height="240"> style="width: 100%; height: 500px;" src="http://jsfiddle.net/ShockFamily/qQy7J/1/embedded/result,html,css" width="320" height="240">

#### CSS3 Gradient Background By Kushagra Agarwal ####

style="width: 100%; height: 500px;" src="http://jsfiddle.net/ShockFamily/gh6RW/embedded/result,html,css" width="320" height="240">

#### Page Curl Box Shadow By Pixleight ####

style="width: 100%; height: 500px;" src="http://jsfiddle.net/ShockFamily/n9fpv/2/embedded/result,html,css" width="320" height="240">

#### CSS-Only Pinterest Style By Kushagra Agarwal ####

style="width: 100%; height: 500px;" src="http://jsfiddle.net/ShockFamily/7C2hc/embedded/result,html,css" width="320" height="240">

#### Fake border gradient By Christophe Gourmelon ####

style="width: 100%; height: 500px;" src="http://jsfiddle.net/ShockFamily/6CSwb/embedded/result,html,css" width="320" height="240">

#### Stacked Papers Using box-shadow By Anas Nakawa ####

style="width: 100%; height: 500px;" src="http://jsfiddle.net/ShockFamily/4YMRv/embedded/result,html,css" width="320" height="240">

#### CSS3 Lined Paper By Taufik Nurrohman ####

style="width: 100%; height: 500px;" src="http://jsfiddle.net/ShockFamily/4YMRv/1/embedded/result,html,css" width="320" height="240">

#### CSS3 Notebook Paper By CSS Creations ####

style="width: 100%; height: 500px;" src="http://jsfiddle.net/ShockFamily/fu78d/3/embedded/result,html,css" width="320" height="240">

#### Single Tag Heading Style (Folded) By dossatack ####

style="width: 100%; height: 500px;" src="http://jsfiddle.net/ShockFamily/b42Gn/4/embedded/result,html,css" width="320" height="240">

#### Single Tag Heading Style (Folded) By Kushagra Agarwal ####

style="width: 100%; height: 500px;" src="http://jsfiddle.net/ShockFamily/ehMTM/embedded/result,html,css" width="320" height="240">  
style="width: 100%; height: 500px;" src="http://jsfiddle.net/ShockFamily/ehMTM/1/embedded/result,html,css" width="320" height="240">

#### Slick Border Gradients By David Higgins ####

style="width: 100%; height: 500px;" src="http://jsfiddle.net/ShockFamily/Bvk6y/embedded/result,html,css" width="320" height="240">

#### Slick Border Gradients By Michael Parenteau ####

style="width: 100%; height: 500px;" src="http://jsfiddle.net/ShockFamily/Mz3T5/2/embedded/result,html,css" width="320" height="240"> style="width: 100%; height: 500px;" src="http://jsfiddle.net/ShockFamily/n7HTC/2/embedded/result,html,css" width="320" height="240">

#### Slick Border Gradients By Chris Coyier ####

style="width: 100%; height: 500px;" src="http://jsfiddle.net/ShockFamily/yywtQ/1/embedded/result,html,css" width="320" height="240">

#### Pure CSS folded-corner effect By Nicolas Gallagher ####

style="width: 100%; height: 500px;" src="http://jsfiddle.net/ShockFamily/sMDq6/embedded/result,html,css" width="320" height="240">

#### Sliding Doors By CSS Creations ####

style="width: 100%; height: 500px;" src="http://jsfiddle.net/ShockFamily/b42Gn/embedded/result,html,css" width="320" height="240">

### 您可能还喜欢 ###

*  [45个纯 CSS 实现的精美边框效果【上篇】][45_ CSS]
 *  [23个纯 CSS3 打造的精美 LOGO 图案][23_ CSS3 _ LOGO]
 *  [推荐35款精致的CSS3和HTML5网页模板][35_CSS3_HTML5]
 *  [12款高质量的免费 CSS 网站模板下载][12_ CSS]
 *  [15个使用CSS3制作的漂亮作品展示网站][15_CSS3]

本文链接：[45个纯CSS实现的精美的边框效果【附演示和源码】][45_CSS]

编译来源：[梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源][_ _ _]

更多专业前端知识，请上 **【猿2048】www.mk2048.com**

[CSS]: http://www.cnblogs.com/lhb25/category/146075.html
[45_ CSS]: http://www.cnblogs.com/lhb25/archive/2012/08/29/css-border-and-box-effect-a.html
[23_ CSS3 _ LOGO]: http://www.cnblogs.com/lhb25/archive/2012/07/25/23-popular-logos-built-purely-with-css3.html
[35_CSS3_HTML5]: http://www.cnblogs.com/lhb25/archive/2012/08/03/5-creative-html5-and-css3-templates.html
[12_ CSS]: http://www.cnblogs.com/lhb25/archive/2011/11/01/high-quality-css-templates-free-download.html
[15_CSS3]: http://www.cnblogs.com/lhb25/archive/2011/11/14/beautiful-portfolio-designs-with-css3.html
[45_CSS]: http://www.cnblogs.com/lhb25/archive/2012/09/10/css-border-and-box-effect-b.html
[_ _ _]: http://www.cnblogs.com/lhb25/archive/2011/07/21/high-quality-free-web-templates-and-layouts-two.html