CSS半圆效果

Question

我正在尝试使用纯CSS创建一个独特的形状。

这是我目前的成果：http://jsfiddle.net/u6vu96u8/ 然而，在半圆的底部有太多的“平坦”。是否可能让曲线在中间完全相遇而没有平线？ 代码：

button {
  font-size: 1em;
  background: #ffffff;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border: 1px solid #1588cb;
  color: #1588cb;
  font-weight: 400;
  height: 60px;
  width: 300px;
  position: relative;
  margin: 25px 0 50px 0;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  -o-box-sizing: content-box;
  box-sizing: content-box;
}
.full-circle {
  border: 1px solid #1588cb;
  height: 35px;
  width: 45px;
  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  -o-box-sizing: content-box;
  box-sizing: content-box;
  border-radius: 0 0 45px 45px;
  border-top: none;
  height: 15px;
  background: #ffffff;
  position: absolute;
  left: 50%;
  margin-left: -17px;
  bottom: -16px;
  line-height: 0;
}

<button>News
  <span class="full-circle">+</span>
</button>

- michaelmcgurk

---

你的.full-circle类中声明了两个高度，只有后者会被使用。 - Andrew

Answer 1

你的圆形类宽度为45px，边框半径为30px。如果你想要一个半圆形，需要把边框半径设置成与宽度相等。将宽度改为30px似乎可以达到你想要的效果（试一试）

- McDuffin

---

太简单了 :-D 非常感谢！！ - michaelmcgurk

@michaelmcgurk 没问题。顺便说一下，你在 full-circle 类上设置了 "height" 属性两次（在顶部将其设置为 35px，在底部附近将其设置为 15px）。只有其中一个会生效，拥有两个将会引起混乱。 - McDuffin

Answer 2

full-circle类有2个高度属性，在我删除第一个之前有点混淆。

button {
    font-size: 1em;
    background: #fff;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border: 1px solid #1588cb;
    color: #1588cb;
    font-weight: 400;
    height: 60px;
    width: 300px;
    position: relative;
    margin: 25px 0 50px 0;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    -o-box-sizing: content-box;
    box-sizing: content-box;
}

.full-circle {
    display:block;
    border: 1px solid #1588cb;
    width: 45px;
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    -o-box-sizing: content-box;
    box-sizing: content-box;
    border-radius: 0 0 60px 60px;
    border-top: none;
    height: 25px;
    background: #fff;
    position: absolute;
    left: 50%;
    margin-left: -17px;
    bottom: -26px;
    line-height: 0;
}

https://jsfiddle.net/hj3g3gjL/

---

更新：

我已经基本搞定了...总之，你欠我一瓶啤酒！

.full-circle {
        display:block;
        border-bottom: 1px solid #1588cb;
        width: 45px;
        -moz-border-radius: 45px / 36px;
        -webkit-border-radius: 45px / 36px;
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        -o-box-sizing: content-box;
        box-sizing: content-box;
        border-radius: 45px / 36px;
        height: 35px;
        background: #fff;
        position: absolute;
        left: 50%;
        margin-left: -17px;
        bottom: -17px;
        line-height: 40px;
    }

https://jsfiddle.net/awea2s2y/

或者这个稍微好一点？https://jsfiddle.net/p9hynbrb/

- Darren Gourley

---

嗨Darren，谢谢你。对于“height”重复的值，我表示歉意。有没有办法让这个半圆形状是“45px宽”和“16px高”？ - michaelmcgurk

@michaelmcgurk 看看更新，就快好了...我已经折腾够一天了！ - Darren Gourley

非常抱歉我的回复有些晚了。非常感谢您的努力。是否有办法修复半圆边框在两侧逐渐变细的问题，您可以看到边框如何变薄。我们能修复吗？ - michaelmcgurk

@michaelmcgurk 我试了一下，但无法让线条完全绕过。您可能需要考虑使用背景图像来实现这个效果？ - Darren Gourley

谢谢，达伦。这确实有点棘手 - 现在我在Chrome和Firefox之间遇到了一些奇怪的问题 :-/ - michaelmcgurk

Answer 3

您可以使用 .full-circle 类的高度和底部 CSS 属性进行调整。

button {
    font-size: 1em;
    background: #ffffff;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border: 1px solid #1588cb;
    color: #1588cb;
    font-weight: 400;
    height: 60px;
    width: 300px;
    position: relative;
    margin: 25px 0 50px 0;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    -o-box-sizing: content-box;
    box-sizing: content-box;
}

.full-circle {
    border: 1px solid #1588cb;
    height: 35px;
    width: 45px;
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    -o-box-sizing: content-box;
    box-sizing: content-box;
    border-radius: 0 0 45px 45px;
    border-top: none;
    height: 19px;
    background: #ffffff;
    position: absolute;
    left: 50%;
    margin-left: -17px;
    bottom: -20px;
    line-height: 0;
}

<button>News<span class="full-circle">+</span></button>

Fiddle

- chiapa

Answer 4

您可以减小宽度以与边框半径相匹配。

button {
    font-size: 1em;
    background: #ffffff;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border: 1px solid #1588cb;
    color: #1588cb;
    font-weight: 400;
    height: 60px;
    width: 300px;
    position: relative;
    margin: 25px 0 50px 0;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    -o-box-sizing: content-box;
    box-sizing: content-box;
}

.full-circle {
    border: 1px solid #1588cb;
    height: 15px;
    width: 30px;
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    -o-box-sizing: content-box;
    box-sizing: content-box;
    border-radius: 0 0 45px 45px;
    border-top: none;
    background: #ffffff;
    position: absolute;
    left: 50%;
    margin-left: -17px;
    bottom: -16px;
    line-height: 0;
}

<button>News<span class="full-circle">+</span></button>

- Haroldo_OK