Question

我正在使用“Inspect element”在Chrome中编辑一个页面，以便在提交CSS样式表之前进行样式编辑。

我正在编辑列表中的:before伪元素，以显示带有绿色背景的主题标签符号，并使其看起来像一片叶子一秒钟，但保存完全按照在预览它们在加载页面时没有显示。

我保存的屏幕截图：以及我得到的内容：
enter image description here

默认情况下，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％“在另一侧”配对才有效。

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

Answer 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占据整行）

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

2 个答案: