代码之家 › 专栏 › 技术社区 › Brian Kalski

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

image css html

Brian Kalski · 技术社区 · 6 年前

我有一个圆形边界的下图。我想能够改变边框的大小(直径),但为了这样做,我必须改变图像的宽度和高度除了边框。是否可以在不更改其他属性的情况下更改边框大小?这是我的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;
  }

3 回复 | 直到 6 年前

Turnip Moushumi Ahmed 6 年前

重置元素的 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>

Attila 6 年前

要实现您想要的,请用以下内容替换您的border属性:

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

通过此操作,您可以通过更改Box Shadow属性中的Spread选项(即 50px 价值)。

请看我的例子: https://jsbin.com/viyihah/edit?html,css,output

Rahul 6 年前

你可以玩 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>

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前