html怎么设置圆圈按钮,如何使用HTML5和CSS 3在圆圈周围放置按钮？

您可以使用一小部分

jquery来加载您想要的文本的中心圆.

$(document).ready(function() {

$('.quart').click(function() {

var ind = $(this).index();

switch (ind) {

case 0:

var tex = "div 1";

break;

case 1:

var tex = "div 2";

break;

case 2:

var tex = "div 3";

break;

case 3:

var tex = "div 4";

break;

}

$('.center').text(tex);

});

});

.wrap {

height: 300px;

width: 300px;

border-radius: 50%;

position: relative;

overflow: hidden;

}

.quart {

position: absolute;

height: 50%;

width: 50%;

background: tomato;

transition: all 0.4s;

}

.quart:first-child {

top: 0;

left: 0;

}

.quart:nth-child(2) {

top: 0;

left: 50%;

}

.quart:nth-child(3) {

top: 50%;

left: 0;

}

.quart:nth-child(4) {

top: 50%;

left: 50%;

}

.center {

height: 80%;

width: 80%;

position: absolute;

top: 10%;

left: 10%;

background: lightgray;

border-radius: 50%;

text-align: center;

line-height: 160px;

}

.quart:hover {

background: dimgray;

}

Click My non-existent Corners!

这可能不会像svg解决方案那样有效,但可以根据您的需要改变colud.