我可以给 div 一个圆形的右侧吗？答案

【问题标题】：Is it possible for me to give a rounded right side to a div?我可以给 div 一个圆形的右侧吗？
【发布时间】：2018-01-21 19:22:10
【问题描述】：

我有一种情况，我希望能够对 div 的右侧进行轻微的四舍五入。是否有任何 CSS 魔法可以实现这一点？如果是这样，请演示使用这个小提琴模板：http://jsfiddle.net/z2hejemu/

HTML

<div class="rounded-side">
    <p>This div is by default rectangular in shape. I'd like the right side of it to be rounded, if that's possible. </p>  
</div>

CSS

div.rounded-side {background-color:yellow;padding:10px;}

div.rounded-side > p {font-size: 36px;}

【问题讨论】：

看看这个w3schools.com/cssref/…
更好的来源：developer.mozilla.org/en-US/docs/Web/CSS/border-radius
这样吗？ jsfiddle.net/z2hejemu/6

标签： html css

【解决方案1】：

要获得所需的半圆，您需要利用the spec 规定的缩放要求。关键是使用具有相等和 非常大 值的border-radius（参见你的小提琴http://jsfiddle.net/gLsd2z4L/）：

div.rounded-side {
    background-color:yellow;
    padding:10px;
    border-radius: 0 100em 100em 0;
}

div.rounded-side > p {font-size: 24px;}

<div class="rounded-side">
    <p>This div is by default rectangular in shape.
       I'd like the right side of it to be rounded, if that's possible. </p>  
</div>

这是因为，as described in the spec:

拐角曲线不能重叠：当任意两个相邻的边界半径之和超过边界框的大小时，UA必须按比例减少所有边界半径的使用值，直到它们都不重叠。

在示例中，半径的总和为 200em；假设你的元素的高度（或宽度，以较小者为准）小于这个总数，半径将按比例缩小。由于我们为半径选择相等的值，它们将继续相等，只是减小了。选择非常大的值（即元素的盒子永远不会接近的尺寸）会强制浏览器进行缩放。

在 Stephen P 在另一个答案的评论中发布的链接 "The curious case of border-radius:50%" 中，他们建议使用值 9999px；我使用100em 只是因为它对我来说看起来更干净。除非某些值/单位比其他值/单位有一些性能成本（非常值得怀疑），否则您使用什么并不重要，只要半径相等并且它们的总和大于元素的大小。

【讨论】：

【解决方案2】：

您只是缺少边界半径： http://jsfiddle.net/z2hejemu/3/

div.rounded-side {
    background-color:yellow;
    padding:10px; 
    -webkit-border-radius: 0 10px 10px 0;
    border-radius: 0 10px 10px 0;
}

边框半径格式在哪里（在这种情况下）：左上角右上右下角左下角

【讨论】：

哎呀。我的OP不清楚。我希望整个右侧是一个半圆。
注意最好have the unprefixed property last。就我个人而言，我已经停止为边框半径使用前缀，对于旧版浏览器来说“太糟糕了”。
@JohnSkeet'sGirlfriend re: 半圆 — 我发现The curious case of border-radius:50% 是一篇很有帮助的文章。
@StephenP 你应该这样回答。我相信这正是 OP 正在寻找的。span>
@iamnotmaynard 这篇文章的重点是 50% 的人可以做奇怪的事情。它 (50%) 对圆形很有用，但是如果您将上面的 jsfiddle.net/z2hejemu/7 中的 110px 更改为 50%，您会得到一个椭圆的右侧而不是半圆形。这篇文章内容丰富，但不是答案（恕我直言）

【解决方案3】：

下面的代码应该可以解决您的问题。

div.rounded-side {
    border-radius:0 20px 20px 0;
}

【讨论】：

【解决方案4】：

<!DOCTYPE html>
<html>
<head>
<style> 

div 
{
border: 2px solid #a1a1a1;
padding: 10px 40px; 
background: #dddddd;
width: 300px;
border-top-right-radius: 2em;
border-bottom-right-radius: 2em;
-webkit-border-top-right-radius: 2em;
-webkit-border-bottom-right-radius: 2em;
-moz-border-top-right-radius: 2em;
-moz-border-bottom-right-radius: 2em;
}

</style>
</head>
<body>

<div>The border-radius property allows you to add rounded corners to elements.</div>

</body>
</html>

【讨论】：