css 图片上加热卖相框

CSS中可以利用伪类元素实现图片上加热卖相框的效果。可以使用:before或:after伪类元素来创建一个相框，并通过CSS样式对其进行美化。

/* 图片上的相框样式 */
.img-frame:before {
  content: " 热卖 "; /* 相框中的文字 */
  display: inline-block;
  border-radius: 20px;
  border: 2px solid #FF4500;
  padding: 4px 10px;
  font-size: 14px;
  color: #FF4500;
  position: absolute;
  top: 10px;
  left: 10px;
}

/* 图片样式 */
.img {
  position: relative; /* 相对定位 */
}

/* 示例图片 */
<img src="http://example.com/img.jpg" class="img" />

在上面的示例代码中，我们首先定义了一个:before伪类元素，它的content属性定义了相框中显示的文本内容，border、padding、color等属性指定了相框的样式。并将其定位到图片的左上角。

图片的样式中设置了相对定位position: relative，用于让伪类元素相对于图片进行定位。

最后，我们可以通过给标签添加class="img"来实现图片上的相框效果。