设置border-bottom/top-right/left-radii答案

【问题标题】：Setting border-bottom/top-right/left-radii设置border-bottom/top-right/left-radii
【发布时间】：2013-12-17 03:13:30
【问题描述】：

我正在使用“检查元素”在 Chrome 中编辑一个页面，以便在提交到我的 CSS 样式表之前进行样式编辑。

我正在编辑列表中的:before 伪元素以显示带有绿色背景的主题标签符号，并让它看起来像一片叶子，但在保存更改后，它们与预览中输入的内容完全相同'在加载页面时没有显示。

我保存的屏幕截图：我得到的：

基本上border-top-left-radius 和border-bottom-right-radius 默认为零，但设置

border-bottom-right-radius: 50px;
border-top-left-radius: 50px;

让我得到那个效果。起初我以为浏览器可能更改了 border-top-right 和 border-bottom-left 的值，但将它们声明为零并没有改变。我知道您使用检查工具看到的内容并不总是实际计算出来的。

相关的CSS是

content: " ＃";
opacity: 1;
border-bottom-right-radius: 50px;
border-top-left-radius: 50px;
text-shadow: #175F0A 1px 1px 0px;
margin-right: 11px;
color: #fff;
background: #81B681;
font-weight: bold;
text-align: center;
border-radius: 28px;
padding-left: 6px;
padding-right: 7px;
padding-top: 4px;
padding-bottom: 5px;
line-height: 2;
border-bottom-left-radius: 0px;
border-top-right-radius: 0px;

更新这很奇怪 - 我有 made a jsfiddle 并且它保留了我的风格......我猜我在某个地方自相矛盾，现在看看除非有人能发现它吗？

http://jsfiddle.net/6Y4nY/3

最终的工作版本http://jsfiddle.net/6Y4nY/4

【问题讨论】：

能给个jsfiddle链接吗？
哇，有多大的几率！谢谢乔希，很奇怪……还有 1 秒尼基塔
好吧，我认为这似乎是正确的，jsfiddle.net/WdtVu/1。
清除了所有的垃圾，裸骨 jsfiddle 现在在更新的描述中

标签： html css

【解决方案1】：

要获得该形状，您必须设置

.test {
    width: 100px;
    height: 100px;
    top: 20px;
    left: 20px;
    background-color: green;
    border-radius: 100% 0px;
}

demo

由于似乎对百分比半径感到困惑：border-radius: 50%;给你一个圆圈。

任何高于该值的值都必须与“另一侧”低于 50% 的值配对才能生效。

如果我不将第二个（和第四个）角设置为 0px，我无法在第一个和第三个中获得 100%

【讨论】：

您是否必须将 0 添加到 border-radius 才能得到它？只需 100%，您就会得到一个圆圈，jsfiddle.net/tVdTh/1。我一直想知道为什么只有 100% 似乎什么都不做。
@JoshPowell border-radius 没有按照你的想法做......这张图很好地解释了为什么......w3.org/TR/css3-background/corner.png。此外，Lea Verou 做了一个很棒的演讲。 lea.verou.me/humble-border-radius
非常感谢您提供这些链接！我现在正在查看演示文稿。
是的，border-radius: 100% 0px; 正是我所需要的。谢谢瓦尔斯！

【解决方案2】：

当我通过小提琴运行该代码时，它会如您所愿。 jsFiddle

.test {
content: " ＃";
opacity: 1;
border-bottom-right-radius: 50px;
border-top-left-radius: 50px;
text-shadow: #175F0A 1px 1px 0px;
margin-right: 11px;
color: #fff;
background: #81B681;
font-weight: bold;
text-align: center;
border-radius: 28px;
padding-left: 6px;
padding-right: 7px;
padding-top: 4px;
padding-bottom: 5px;
line-height: 2;
border-bottom-left-radius: 0px;
border-top-right-radius: 0px;
    display: inline;
}

也许在您的代码中的其他地方，您将右上角和左下角的半径设置为 0 以外的值？

（我在底部添加了显示以防止 div 占据整行）

【讨论】：