纯css实现给图片加标签
原理：通过border、before、after、content、position定位，等等属性实现给图片添加标签样式。
效果截图如下：
代码实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>banner图片标签</title>
<style type="text/css">
img{width: 500px;}
.tags{margin: 100px auto auto 100px;}
.tags:before{
position: absolute;top: 5px;left: -8px;z-index: 1;
padding-right: 10px;font-weight: bold;color: #000;
height: 0px;line-height: 0px;
border: #EE7600 15px solid;
border-right-color: transparent;
content: "图片";
box-shadow: -0px 5px 5px -5px #000;
}
.tags:after{
content: "";
position: absolute;top: 35px;left: -8px;
border: #89540c 4px solid;
border-left-color: transparent;
border-bottom-color: transparent;
}
</style>
</head>
<body>
<div class="tags" style="position: relative;">
<img src="images/03.jpg" alt="网络图片"/>
</div>
</body>
</html>
注意：
- 这种通过定义css实现给图片添加标签的方法可以实现不同的标签样式。
例如：
结合css3圆角、css3渐变、before、after等属性，可以创建出（三角形、矩形、圆形、回形针等等）很多种效果。- 尤其是将 回形针 与 拍立得相框 结合起来，效果更好！
以上就是关于“ 纯css实现给图片加标签 ” 的全部内容。