實現(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)效果:
標(biāo)題名稱:css如何實現(xiàn)圓角內(nèi)凹效果
URL標(biāo)題:http://m.kartarina.com/article28/cpcicp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)頁設(shè)計公司、企業(yè)網(wǎng)站制作、App設(shè)計、網(wǎng)站建設(shè)、動態(tài)網(wǎng)站、營銷型網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)