问题标签 [border-radius]

我试图在具有弯曲边框的 div 内渲染图像。我遇到了一个问题，即图像没有完全填充 div，尽管它们具有相同的边框半径和尺寸。

这是我在 div 中渲染图像的方式

这是css类

这是实时代码框环境 链接的链接

我有一个 div 元素，我想应用 100px 的边框半径，使其呈圆形。不幸的是，边界半径不适用于 div 元素。CSS 选择器如下所示：

有人知道如何做软边界半径，比如：

Flutter甚至可能，我找不到如何。

我有一个游戏，看起来有点像 1980 年的游戏。我有这个对话框：

我想在这个对话框中添加一个边框半径，就像口袋妖怪中的一样：

有没有办法实现这个像素化的边界半径，而不是圆形的边界半径？

https://faylette.github.io/3-column-preview-card-component-main/

我正在研究这个并尝试将边框半径应用于包含元素，它确实出现了，但只有当元素接触浏览器的边缘时才会出现。无论 flex-direction 是行还是列，都会发生这种情况。

不接触浏览器边缘时边框半径消失

触摸浏览器边缘时根据需要显示边框半径

这是相关的CSS代码。

请让我知道如何解决这个问题，因为这是我在 Stack Overflow 上的第一篇文章，如果我在问这个问题时做错了什么。谢谢！

在下面的示例片段中，我尝试对元素的最后一个子.container元素施加与 相同border-radius的内容.container，以便当最后一个子元素在悬停时突出显示时，其背景会跟随父元素的形状。在我根据像素设置的特定情况下，这似乎工作得很好。border-radius

但是，如果我使用ems，2em而不是s 20px，事情会像这样中断：

我猜这是因为父母的曲率比最后一个孩子的高度要高。事实上，如果我20px改为50px我得到这个：

因此，我认为20px我只是幸运，而border-radius试图让孩子跟随父母的形状而继承的整体方法是错误的。实际上，在 的最后一个示例中50px，必须将第二个条目裁剪掉，而这根本无法通过 获得border-radius。

我该怎么做呢？

试图弄清楚如何在这个剪辑路径多边形的左下角模拟一个边界半径。

我读了一堆其他的 stackoverflow 问题，但似乎没有一个真正解决它，他们有一个例子，有人出现并修复了他们的例子，而没有真正描述如何正确生成半径。

我的多边形： https ://i.imgur.com/ZWwQTsx.png

当前样式：

谢谢！

尝试在这里制作一个带有偏移轮廓的圆形按钮，它在 Firefox 中可以工作（轻微的视觉伪影，比如一些点被略微裁剪，但只是有时，如粉红色下划线所示），但在它停留的 Edge 中根本不起作用正方形。

CSS 非常基础，border-radius 50% + outline + outline-offset。我知道这可能与仅应用于边框的边框半径有关，但由于偏移，我无法使用边框。有什么办法可以让它工作吗？

谢谢，

比较

我有没有办法让这个三角形的最大字符串像图片中一样变成椭圆形的字符串？谢谢！

预期的：

我之前从未问过css问题，所以提前道歉。

这就是我的导航栏看起来像当前全尺寸的图像

我真正想要实现的两件事：

1. 在当前选项卡的上方和下方循环选项卡
   （在这张图片中，它是Suggestions和About Us）
2. 除当前选项卡外，右侧的导航栏阴影

（我正在使用 jinja2 btw。由于当前选项卡未固定，因此无法对角进行硬编码）

我不知道 1. 但我尝试了 2. 这是不满意的结果：

想摆脱突兀的角落

这是我当前的样式表

这是 layout.html

这是navigation.html