站長資訊網(wǎng)
實現(xiàn)思路：
（推薦教程：css快速入門）
兩個并排的div，在第二個div內(nèi)定義一個2倍寬高的名為item，對item進(jìn)行設(shè)置border-radius: 50%，再對其進(jìn)行絕對定位。
代碼實現(xiàn)：
<head> <meta charset="UTF-8" /> <title>Title</title> <style> .box { width: 50px; height: 50px; overflow: hidden; background: #655; text-align: center; position: relative; float: left; } .item { width: 100px; height: 100px; background: #fff; border-radius: 50%; position: absolute; top: -50px; left: 0; } </style> </head> <body> <div class="box"></div> <div class="box"> <div class="item"></div> </div> </body> </html>
實現(xiàn)效果：
