html 怎么做成一个圆,html – 如何用CSS3制作弧形？

使用以下HTML：

和CSS：

#arcs div {

border: 2px solid #000; /* the 'strokes' of the arc */

display: inline-block;

min-width: 4em; /* the width of the innermost element */

min-height: 4em; /* the height of the innermost element */

padding: 0.5em; /* the spacing between each arc */

border-radius: 50%; /* for making the elements 'round' */

border-top-color: transparent; /* hiding the top border */

border-bottom-color: transparent;

}

#arcs div {

border: 2px solid #000;

/* the 'strokes' of the arc */

display: inline-block;

min-width: 4em;

/* the width of the innermost element */

min-height: 4em;

/* the height of the innermost element */

padding: 0.5em;

/* the spacing between each arc */

border-radius: 50%;

/* for making the elements 'round' */

border-top-color: transparent;

/* hiding the top border */

border-bottom-color: transparent;

}