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

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

為什么圖片沒(méi)有占滿(mǎn)整個(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>

回答

編輯回答