使用CSS3制作PS级的图片边框效果

感谢您访问小篮博客”,本站专注活动分享,SEO技术,网站源码,绿色软件等免费资源分享希望大家能够多多支持哦!喜欢本站的朋友可以把本站添加到书签或记住网址,本站网址:www.nswin.cc, 站长 QQ 123326923
  • 内容
  • 相关

当一个开发者需要制作图片边框效果时通常有两种选择:一是使用Photoshop来制作,二是在通过CSS来渲染“盒中盒”的效果。在这个教程中,我们要制作一种带复杂边框的相框效果,通过 CSS3 我们可以很容易的完成这种效果。

通常在美术馆中展览的相片或图片都使用一个相框将其表起来。除了最外层的相框外,里面还有几层不同颜色和纹理的装饰,我们就是要在网页上通过CSS来展示这种效果。

我们使用的HTML结构仅仅是一个<img>标签:

 

<img class="mat" src="1.jpg" alt="......">   

首先,让我们思考一下哪一个CSS属性更适合于制作这种图片的边框。box-model显然是一个很好的选择,border可以用来制作外边框,外边框和图片元素之间的padding可以用来制作装饰。

一般我们都需要图片举要响应式效果,所以我们的CSS代码可以这样写:

 

img.mat { 
    box-sizing: border-box; 
    width: 80%; 
    height: auto;
    display: block; 
    margin: 4rem auto; 
    padding: 10%;
    background: #F4F0EC; 
    border: 8px solid #333;
    box-shadow: 0 0 0 50px rgba(125,135,18,0.3) inset; 
}         

注意:我们使用box-sizing: border-box来使图片的相对缩放效果变得简单。

 

36474b2df728937e27d75b77d92e6e2420170804163006.jpg

 

这里的技巧是内部阴影没有提供水平或垂直的偏移或者任何的模糊效果。仅仅使用spread、inset和颜色值来渲染内部的阴影效果。

我们可以扩展一下,让图片效果更具层次感,我们可以再添加一个内部阴影,并且为它提供一个背景图片:

 

img.mat {
    box-sizing: border-box; 
    width: 80%; 
    height: auto; 
    display: block;
    margin: 4rem auto; padding: 10%;
    background-image: url(cardboard.jpg);
    background-repeat: no-repeat; background-size: contain;
    border: 8px solid #333;
    box-shadow: 0 0 0 50px rgba(125,135,18,0.3) inset,
    0 0 30px rgba(0,0,0,0.8) inset;
}     

最后,我们要使用outline为图片制作最外层的边框效果,这一步要注意:Firefox浏览器对outline的解析与其它浏览器有所不同:它有一个默认的12px的offset,而且outline会将所有的外部阴影向外推挤。

因此,为了兼容Firefox浏览器,最终的代码应该如下所示:

 

 

img.mat3 {
    -moz-box-sizing: border-box; box-sizing: border-box;
    width: 100%; 
    height: auto; 
    display: block; 
    padding: 10%;
    background-color: #A67B5B; background-image: url(cardboard.jpg);
    background-repeat: no-repeat; background-size: cover;
    border: 6px double #483C32;
    box-shadow: 0 0 0 50px rgba(244,240,236,0.4) inset,
    0 0 0 11px rgb(180, 130, 90),
    0 0 30px rgba(0,0,0,0.8) inset;
    -webkit-box-shadow: 0 0 0 50px rgba(244,240,236,0.4) inset,
    0 0 0 11px rgb(180, 130, 90),
    0 0 30px rgba(0,0,0,0.8) inset,
    0 30px 20px rgba(0,0,0,0.3);
    outline: 2px solid #333; outline-offset: 0px;
} 

 

这样,PS级的图片相框效果使用 CSS3 就做好了。但这仅仅是开始,你还可以做得更好更漂亮,希望看过这篇文章的童鞋都多动手多思考,做出更漂亮的效果。

以下是全部代码点击可运行演示

本文标签:

版权声明:若无特殊注明,本文皆为《小蓝博客》网络转载而来。并不代表本站立场。

文章标题:使用CSS3制作PS级的图片边框效果

本文链接:https://www.nswin.cc/104.html

收录状态:[百度未收录]

二维码加载中……

发表评论

电子邮件地址不会被公开。 必填项已用*标注

允许邮件通知

评论

1条评论
  1. avatar

    Error Lv.3 回复

    好文章~

    江苏省扬州市 电信