CSS: 是否可以制作轮廓边框半径？方形图像中的圆形

Question

我正在尝试制作一个方形菜单，我想添加一个圆形框阴影。类似这样：

https://i.stack.imgur.com/D1owT.png

但它是这样的：

https://i.stack.imgur.com/YGUWt.png

如果我添加 border-radius 是这样的，这不是我要找的：

https://i.stack.imgur.com/HdwlW.png.

这是我正在使用的代码：

nav .nav-right-section .menu-icon {
    background-image: url('https://www.svgrepo.com/show/41236/dots-menu.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 16px;
    height: 16px;
    margin-right: 10px;
    margin-left: 10px;
    cursor: pointer;
}

nav .nav-right-section .menu-icon:hover {
    background-color: rgba(196, 196, 196, 0.131);
    -webkit-box-shadow: 0px 0px 0px 4px rgba(196, 196, 196, 0.131);
    -moz-box-shadow: 0px 0px 0px 20px rgba(196, 196, 196, 0.131);
    box-shadow: 0px 0px 0px 12px rgba(196, 196, 196, 0.131);
    border-radius: 50%;
    
}

Answer 1

你可以尝试用另一个div包裹图标。

然后只在这个包装器上做边框半径 div。

nav .menu-icon-container {
    width: 16px;
    height: 16px;
    cursor: pointer;
    margin: 16px;
}

nav .menu-icon-container .menu-icon {
    background-image: url('https://www.svgrepo.com/show/41236/dots-menu.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 100%;
    height: 100%;
}

nav .menu-icon-container:hover {
    background-color: rgba(196, 196, 196, 0.131);
    -webkit-box-shadow: 0px 0px 0px 4px rgba(196, 196, 196, 0.131);
    -moz-box-shadow: 0px 0px 0px 20px rgba(196, 196, 196, 0.131);
    box-shadow: 0px 0px 0px 12px rgba(196, 196, 196, 0.131);
    border-radius: 50%;
}

<nav>
  <div class="nav-right-section">
    <div class="menu-icon-container">
      <div class="menu-icon">
      </div>
    </div>
  </div>
<nav>

CSS: 是否可以制作轮廓边框半径？方形图像中的圆形

CSS: is it possible to make outline border-radius? circle shape in a square shape image

html

css

button

hover