如何使用渐变图像带（细线）在HTML中创建渐变框？

Question

假设我有以下图像：

Reference

我想用它来创建一个更大的盒子，像这样：

更好的是，我想输入一个文本，说：“在这里购物！”在创建的框的中心。

如何在HTML + CSS中实现？预先感谢您的回答！

Answer 1

使用background属性设置background-image url（）和background-repeat重复x值。然后使用flex框居中文本：

.gradient{
   background: url(https://i.stack.imgur.com/3Qnum.png) repeat-x;
   /*same as*/
   /*background-image: url(https://i.stack.imgur.com/3Qnum.png);
   background-repeat: repeat-x;*/
   height:194px;
   border-radius: 10px;

   display: flex;
   align-items: center;
   justify-content: center;
}

<div class="gradient">Shop Here!</div>

Answer 2

您可以避免使用图像，而使用.gradient{ background: linear-gradient(to bottom,#3888fe ,transparent 80%) top, linear-gradient(to top,#3888fe,transparent 80%) bottom; background-size:100% 50%; background-repeat:no-repeat; height:150px; width:150px; border-radius: 10px; text-align:center; line-height:150px; }重新创建图像。您还可以在以后轻松更改颜色和其他属性，并且它也会对高度有所响应：

<div class="gradient">Shop Here!</div>

SELECT * FROM messages WHERE send_from = 65 OR send_to = 65 GROUP BY `property_id`