代码之家 › 专栏 › 技术社区 › mic

如何在高度变化时保持边界半径形状

css html

-1

mic · 技术社区 · 6 年前

我为我的div指定了一个50px的边界半径,以实现以下结果:

但是,当div的高度改变时,边界的曲率也会改变

我想要的是两边保持笔直,边角保持不变,就像这样:

这就是我的css当前的样子:

.card {
    border-radius: 50px;
    height: 100%;
}

3 回复 | 直到 6 年前

Borhan 6 年前

50px的边界半径太大了。你可以用20像素。

.card {
  margin-bottom:20px;
  background: yellow;
  padding: 10px;
  width: 80%;
  border-radius: 20px;
  position: relative;
}
.avatar {
  background: red;
  height: 50px;
  width:50px;
  border-radius:50%;
  position: absolute;
  top: -2px;
  right: -2px;
 
}

p {
 width: calc(100% - 20px);
}

<div class="card">
  <p>Lorem Ipsum is simply dummy text of the printing and typeset </p>
  <div class="avatar"></div>
</div>
<div class="card">
  <p>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
  <div class="avatar"></div>
</div>

<div class="card">
  <p>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
  <div class="avatar"></div>
</div>

SpiRT 6 年前

Border-radius in percentage (%) and pixels (px) or em

所以,要使两个框相同,只需使用右边界半径值-例如20px。

jsfiddle.net/xky4r539/

tao 6 年前

50px 值太高了 border-radius 首先。
它之所以在很小的时候起作用,是因为它被封顶在它们之间的边的一半高度上。因此,在上面的示例中,实际(结果)值约为 18px (div高度的一半)。

当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 年前