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

html-css017

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

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

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

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

希望我的回答能帮到你;

css3矩形到六边形 .arrow{   

              display: inline-block   

              width:0px   

              height: 0px   

              border-style: solid   

              border-width: 100px //与padding、margin属性类似,顺序为上、右、下、左   

              border-color: red blue orange gray//顺序为上、右、下、左}

border-raduis:长度;可以实现你想要的效果;如果不明白具体意思的话,给你发个链接地址,你可以自己在线测试一下;下面有详细的扩展介绍,有助你以后碰到类似的问题的时候明白如何解决;

http://www.css88.com/tool/css3Preview/Border-Radius.html

你可以亲自来演示一下;