Question

我有一个带圆角的黄色按钮，里面有一些文字，文本右边有一个下载图片。

我的按钮设置如下：

<a class="yellow-button" href="#">Some text</a>

我的样式设置如下：

.yellow-button {
  border-radius: 0.375rem;
  background-color: yellow;
  padding: 13px 30px;
  margin-top: 5px;
  box-sizing: border-box;
  font-size: 0.875rem;

  &:after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    background: url(../img/download-icon.png) no-repeat;
    background-size: 16px 17px;
    margin-left: 5px;
    margin-right: 20px;
    height: 18px;
    width: 16px;
  }
}

我遇到的问题是按钮右侧的两个角都不是圆角而是左侧角。

Answer 1

这里真正的问题是您在链接中放置inline-block元素（默认情况下为display: inline）。这并不总是不正确，但它肯定会让您看到布局变得更加棘手（即默认情况下您的<a>无法按照您的要求行事：永远不会应用保证金。）

按下按钮display: inline-block，问题就会消失：

＆＃13;

.button {
  display: inline-block;
  border-radius: 0.375rem;
  background-color: red;
  color: white;
  margin-top: 5px;
  padding: 13px 30px;
}

.button:after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  background: blue;
  margin-left: 5px;
  margin-right: 20px;
  height: 18px;
  width: 16px;
}

＆＃13;

<a class="button" href="#">Some text</a>

＆＃13;

Answer 2

在背景上添加::after透明度，以及相同的圆角

background-color:transparent;
border-radius: 0.375rem;

使用更多代码和图像，我们可以确切地看到问题是什么

＆＃13;

.yellow-button {
  border-radius: 0.375rem;
  color: yellow;
  padding: 13px 30px;
  margin-top: 5px;
  box-sizing: border-box;
  font-size: 0.875rem;
}
 .yellow-button:after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    /* --------------- */
    background-color: transparent;
    border-radius: 0.375rem;
    /* --------------- */
    background: url(../img/download-icon.png) no-repeat;
    background-size: 16px 17px;
    margin-left: 5px;
    margin-right: 20px;
    height: 18px;
    width: 16px;
}

＆＃13;

<a class="yellow-button" href="#">Some text</a>

＆＃13;

使用:: after时的border-radius问题

2 个答案: