html – CSS半圆效果

概述我正在尝试使用CSS创建一个独特的形状. 这是我到目前为止：http://jsfiddle.net/u6vu96u8/ 但是,在半圆的底部有太多的平坦. 是否有可能,我可以让曲线在没有扁线的情况下恰好在中间相遇？ 码： button { font-size: 1em; background: #ffffff; border-radius: 10px; -moz-border-rad 我正在尝试使用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 >+</span></button>

解决方法 你在全圆类上有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/

总结

以上是内存溢出为你收集整理的html – CSS半圆效果全部内容，希望文章能够帮你解决html – CSS半圆效果所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。