CSS3图片相框丝带特效

纯 CSS3 写的图片相框丝带特效，样子挺精致的，不靠图片、不用 JavaScript，光靠一套 CSS 就能搞定。丝带是用伪元素画出来的，还能加点渐变、加点旋转，看起来就挺有立体感。你要是做博客封面、头像展示，或者产品图加个吸睛点，用这个样式还挺合适的。

丝带的位置是靠position: absolute+伪元素组合搞定的，放到图片角落刚刚好。像::before、::after这种，在 CSS 里加点content、配点背景颜色，就能模拟出小标签的感觉。

你还可以配合transform: rotate(-45deg)，让丝带斜着放，更有范儿。搭配transition搞个 hover 切换颜色，交互也不死板。反正都是 CSS 里的活儿，浏览器支持也挺好。

文件名是texiao2331_1560681037，应该是个 CSS 样式或者 Demo 源码，自己打开看看结构快就能上手。你要是对圆角边框感兴趣，也可以顺便看看这些：

• css3 实现圆角边框
• css 图片圆角边框的效果
• CSS3 圆角边框和边界图片效果实例
• Css3 圆角边框
• css3 圆角边框和边框阴影示例
• 第 23 章 CSS3 边框图片效果

如果你在做图片展示类页面，不想写一堆 JS，又想效果上点档次，这种纯 CSS 的小特效可以放心上用。