3

我正在使用声望主题，我希望我的“Restocked”风格就像你看到的“Best Seller”一样，它周围有椭圆形，如果可能的话，还有一个阴影。下面是我在 product-template.liquid 中的内容，我试图让椭圆与文本一起自动调整大小，并且在文本的侧面和顶部和底部有一些填充，就像'的图片一样畅销书'。关于如何做到这一点的任何想法？

<div class="Product__InfoWrapper">
<div class="Product__Info {% if image_count == 0 %}Product__Info--noGallery{% endif %}">
<div class="Container">

{% if product.tags contains "new-badge" %}
NEW PRODUCT
{% elsif product.tags contains 'restocked' %}
RESTOCKED 
{% elsif product.tags contains 'best-seller' %}
BEST SELLER 
{% elsif product.tags contains 'selling-fast' %}
SELLING FAST 
{% endif %}

{%- render 'product-meta', product: product, show_description: true -%}

{%- if product.template_suffix != 'coming-soon' -%}
{%- render 'product-form', product: product -%}
{%- endif -%}

我目前拥有的目前看来

我想要的是我想得到什么

4

2 回答 2

3

在此处输入图像描述

试试这个代码。使用您的字体样式和边框颜色。

<body>
    <div style="text-align: center">
      <p
        style="
          border: 2px solid rgba(68, 66, 66, 0.473);
          border-radius: 300px;
          padding: 10px;
          width: 190px;
          font-size: 22px;
          font-weight: 900;
        "
      >
        RESTOCKED
      </p>
    </div>
</body>
于 2021-11-13T09:43:08.993 回答
0

这将解决您根据字体大小自动调整大小的问题。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Button style</title>
  </head>
  <body>
    <div style="text-align: center">
      <button
        style="
          border: 2px solid rgba(68, 66, 66, 0.473);
          border-radius: 300px;
          padding: 10px;
          padding-left: 20px;
          padding-right: 20px;
          font-size: 22px;
          font-weight: 900;
        "
      >
        RESTOCKED
      </button>
    </div>
  </body>
</html>

于 2021-11-13T18:18:58.107 回答