css3画矩形,矩形里面有多个圆圈,圆圈里面有字,如何实现?

html-css028

css3画矩形,矩形里面有多个圆圈,圆圈里面有字,如何实现?,第1张

首先你先定一个矩形区域，让这个区域的边框用border:像素 颜色 值；给边框四周上个颜色；

然后再次在这个矩形区域里面定义一个或者多个区域，同样给边框上个颜色，然后用border-radius:50%；这样就会让此矩形区域变换为圆形，依次在里面添加一个或者多个即可；

最后在你定义的圆形区域里面打上文字，如果那里不合适，用css控制一下区域或者文字；

希望我的回答能帮到你；

朋友，我给你来个实例吧，希望采纳答案，谢谢。

CSS代码：

<style

type="text/CSS">

div#nifty{margin:0background:#9BD1FA}

p

{padding:10px}

div.rtop

{display:blockbackground:#fff}

div.rtop

div

{display:blockheight:1pxoverflow:hiddenbackground:#9BD1FA}

div.r1{margin:0

5px}

div.r2{margin:0

3px}

div.r3{margin:0

2px}

div.rtop

div.r4

{margin:0

1pxheight:2px}

</style>

HTML代码：

<div

id="nifty">

<div

class="rtop">

<div

class="r1"></div>

<div

class="r2"></div>

<div

class="r3"></div>

<div

class="r4"></div>

</div>

<p>div

+

css

圆角矩形

www.865171.cn

</p>

<div

class="rtop">

<div

class="r4"></div>

<div

class="r3"></div>

<div

class="r2"></div>

<div

class="r1"></div>

</div>

</div>