html中半圆怎么写,html – CSS半圆效果

你在全圆类上有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;

}

更新：

我有点工作……无论哪种方式,你欠我一杯啤酒！

.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;

}