前端技巧CSS给图片增加四角相框效果的简单方法

CSS给图片增加四角相框效果的简单方法

CSS给图片制作普通的边框只需使用border属性即可,文本主要分享制作图片四个角不同样式的边框,例如下图的效果:

图片相框.jpg

这是很常见的相框的效果,不过是实在不知道文字怎么表示这个样式,先称之为四角相框吧,本文制作四角相框的原理是做四个空的span标签分别定位到图片的四个角,然后设置样式,首先是html部分:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试页面</title>
</head>
<body>
 <div class="photoframe">
 <span></span><span></span><span></span><span></span>
 <div class="photo"><img alt="测试图片" src="1.png" /></div>
 </div>
</body>
</html>

接着设置基本的CSS样式,给span标签设置定位以及颜色样式:

.photoframe {
 position:relative;
 width:245px;
 height:180px;
 padding:3px;
}
.photoframe span {
 position:absolute;
 border-style:solid;
 border-color:#BC4F71;
 padding:15px;
}

接着通过伪类选择器设置四个span标签的偏移和边框样式:

.photoframe span:nth-child(1) {
 left:-8px;
 top:-8px;
 border-width:8px 0 0 8px;
}
.photoframe span:nth-child(2) {
 right:-8px;
 top:-8px;
 border-width:8px 8px 0 0;
}
.photoframe span:nth-child(3) {
 right:-8px;
 bottom:-8px;
 border-width:0 8px 8px 0;
}
.photoframe span:nth-child(4) {
 left:-8px;
 bottom:-8px;
 border-width:0 0 8px 8px;
}

这样以来就实现了示例图片中左边的效果了,如果需要右边的效果则给相框再加个边框就行了:

.photoframe {border:6px solid #555;}

在网页里加这么多空的span标签并不美观,也没有语义,显得很不正规,所以这样的做法并不好,不过同样的思路,使用CSS伪元素就可以避免这个问题,方法是一样,也是加四个空标签,只是换成通过伪元素去添加,几没有多余的html代码了,下面贴出整体代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试页面</title>
<style type="text/css">
.photoframe{
 position:relative;
 width:245px;
 height:180px;
 padding:3px;
 border:6px solid #555;
}
.photoframe:before, .photoframe:after, .photo:before, .photo:after {
 content:" ";
 position:absolute;
 border-style:solid;
 border-color:#BC4F71;
 padding:15px;
}
.photoframe:before { 
 left:-8px;
 top:-8px;
 border-width:8px 0 0 8px;
}
.photoframe:after { 
 right:-8px;
 bottom:-8px;
 border-width:0 8px 8px 0;
}
.photo:before { 
 left:-8px;
 bottom:-8px;
 border-width:0 0 8px 8px;
}
.photo:after { 
 right:-8px;
 top:-8px;
 border-width:8px 8px 0 0;
}
</style>
</head>
<body>
 <div class="photoframe">
 <div class="photo"><img alt="测试图片" src="1.png" /></div>
 </div>
</body>
</html>

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.flooren.com.cn/skill/136.html