鍍金池/ 問(wèn)答/HTML5  HTML/ 圖片圓角效果實(shí)現(xiàn)？

圖片圓角效果實(shí)現(xiàn)？

我想實(shí)現(xiàn)一個(gè)效果，一個(gè)div之內(nèi)包含一個(gè)圖片標(biāo)簽。div設(shè)置通過(guò)border-radius設(shè)置成一個(gè)圓形。想實(shí)現(xiàn)圖片也占滿圓形的效果。然后該div加一個(gè)box-shadow.但是實(shí)現(xiàn)的效果跟預(yù)期的不一致。圖片描述

為什么圖片沒(méi)有占滿整個(gè)div呢？div和圖片之間還有一個(gè)空隙。
我的代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{padding: 0;margin: 0;box-sizing: border-box}
        div{
            width: 130px;height: 130px;border: 1px solid #444;
            border-radius: 50%;
            margin: 100px auto;
            box-shadow: 0 0 10px #444;
            vertical-align: top;
        }
        img{
            display: block;
            width: 100%;height: 100%;
        }
    </style>
</head>
<body>
    <div>
        <img src="./img/default.png" alt="">
    </div>
</body>
</html>
回答
編輯回答
編輯回答
莫小染

你原來(lái)的圖是圓的吧？我給img標(biāo)簽加上border-radius:50%才變圓的。
https://codepen.io/anon/pen/V...
白邊估計(jì)就是圖片問(wèn)題，把default.png穿上來(lái)看看唄。

2017年5月25日 08:56
編輯回答
薄荷糖

你把img標(biāo)簽也加上radius就可以了

2017年3月22日 01:59
編輯回答
糖果果

你的代碼沒(méi)有一點(diǎn)問(wèn)題，請(qǐng)仔細(xì)檢查你的圖片是不是四周有白色的邊界。

2017年12月19日 10:01
編輯回答
孤慣

你的圖有白邊么？ 圖片也得設(shè)置border-radius
把圖換成純色背景的標(biāo)簽試下

2017年6月2日 10:56
編輯回答
半心人

圖片大小多少啊，是不是圖片寬高還沒(méi)有130px

2017年2月5日 16:05
編輯回答
妖妖

新人路過(guò)，今天看了一片文章可能對(duì)你有用。
張?chǎng)涡?/a>

2017年7月6日 22:43