Question

遇到一个奇怪的问题，当我用css设置按钮时，我可以设置它的颜色，字体大小，背景，但是不能设置它的边框。以下是HTML和CSS代码。

.btn-general {
  border-width: 2px !important;
  border-style: solid !important;
  border-radius: 0;
  padding: 12px 26px 12px 26px;
  font-size: 16px;
  font-weight: 400;
  text-transform: uppercase !important;
}

.btn-white {
  border-color: #fff;
  color: #fff;
}

<section id="home">

  <div id="home-cover">

    <div id="home-content-box">

      <div id="home-content-box-inner">

        <div id="home-heading">

          <h3>Watch Out<br>The Modern Responsive Website!</h3>

        </div>

        <div id="home-btn">
          <a type="button" class="btn btn-lg btn-general btn-white" href="#work" title="View Our Work">View Our Work</a>
        </div>

      </div>

    </div>

  </div>

</section>

Answer 1

将您的CSS放入样式标记

<style>
    .btn-general{
    border-width:2px !important;
    border-style: solid !important;
    border-radius: 0;
    padding: 12px 26px 12px 26px;
    font-size: 16px;
    font-weight: 400;
    text-transform: uppercase !important;
    }

    .btn-white{
    border-color: #fff;
    color: #fff;
    }
    </style>

始终将CSS放在html 的顶部

        <div id="home-cover">

            <div id="home-content-box">

                <div id="home-content-box-inner">

                    <div id="home-heading">

                        <h3>Watch Out<br>The Modern Responsive Website!</h3>

                    </div>

                    <div id="home-btn">
                        <a type="button" class="btn btn-lg btn-general btn-white" href="#work" title="View Our Work">View Our Work</a>
                    </div>

                </div>

            </div>

        </div>

    </section>

Answer 2

您已将边框颜色设置为白色，这就是您无法看到的原因。我已将其更改为更深的颜色，以便您可以看到它。

.btn-general{
border-width:2px !important;
border-style: solid !important;
border-color: #ff3333;
border-radius: 0;
padding: 12px 26px 12px 26px;
font-size: 16px;
font-weight: 400;
text-transform: uppercase !important;

}

.btn-white{
color: #222;

border-color: #222;
}

<section id="home">

        <div id="home-cover">

            <div id="home-content-box">

                <div id="home-content-box-inner">

                    <div id="home-heading">

                        <h3>Watch Out<br>The Modern Responsive Website!</h3>

                    </div>

                    <div id="home-btn">
                        <a type="button" class="btn btn-lg btn-general btn-white" href="#work" title="View Our Work">View Our Work</a>
                    </div>

                </div>

            </div>

        </div>

    </section>

希望这有帮助

无法使用css设置按钮边框属性

2 个答案: