html - 设置 border-bottom/top-right/left-radii

Question

我正在使用“检查元素”在 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

Answer 1

要得到那个形状，你必须设置

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

demo

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

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

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