调整图像周围的边框需要更改高度和宽度

Question

下面的图片带有圆形边框。我希望能够更改边框的大小（直径），但是要做到这一点，除了边框之外，我还必须更改图像的宽度和高度。是否可以更改边框大小而不必同时更改其他属性？这是我的html和CSS类。谢谢。

<div><img class="marker"></div>

.marker {
    width:150px;
    height:150px;
    transform: rotate(50deg) !important;
    position: absolute;
    border:solid 50px rgba(50, 105, 206, 0.5);
    border-radius:150px;
    cursor: pointer;
  }

Answer 1

将元素的box-sizing属性重置为默认的content-box。

您最有可能在其他地方将某些CSS更改为border-box

.marker {
  width: 150px;
  height: 150px;
  transform: rotate(50deg) !important;
  /* position: absolute; */
  border: solid 50px rgba(50, 105, 206, 0.5);
  border-radius: 150px;
  cursor: pointer;
  box-sizing: content-box;
}

.marker-alt {
  box-sizing: border-box;
}

<div><img class="marker"></div>

<div><img class="marker marker-alt"></div>

Answer 2

要实现所需的目标，请使用以下内容替换border属性：

box-shadow: 0 0 0 50px rgba(50, 105, 206, 0.5);

这样，您可以通过更改box-shadow属性（即50px值）中的价差选项来更改“边框”的大小。

请参阅我的示例：https://jsbin.com/viyihah/edit?html,css,output

Answer 3

您可以和border-width和border-radius:50%;一起玩，使每次都圆满

.marker {
    width:150px;
    height:150px;
    transform: rotate(50deg) !important;
    position: relative;
    border:solid 100px rgba(50, 105, 206, 0.5);
    border-radius:50%;
    cursor: pointer;
  }
  .marker.sm{
    border-width: 10px;

  }

<div><img class="marker" src="https://cdn.pixabay.com/photo/2015/03/04/22/35/head-659652_960_720.png"></div>


<div><img class="marker sm" src="https://cdn.pixabay.com/photo/2015/03/04/22/35/head-659652_960_720.png"></div>