blocks|key|2065557|text|是的，这是可能的(尽管我只在Chromium28/Ubuntu12.10中测试过)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2065558|div+{
++++/*+this+is+the+only+relevant+part:+*/
++++border-radius:+20%25/50%25;

++++/*+this+is+irrelevant,+and+just+so+the+element+can+be+visualised/displayed:+*/
++++width:+50%25;
++++height:+5em;
++++margin:+2em+auto;
++++background-color:+#000;
}|code-block|syntax|javascript|2065559|JS+Fiddle演示。|offset|length|2065560|很明显，重要的信息是20%25/50%25属性值；20%25是半径的“水平长度”，而50%25是“垂直长度”；使用两种不同的测量方法给出了一条向边界的椭圆曲线，而不是一次测量，从而产生了更圆的半径。显然，这需要对您自己的需求进行一定程度的调整。|style|CODE|2065561|参考文献：|2065562|border-radius+(at+Mozilla开发人员网络)。|unordered-list-item|2065563|CSS背景和边界模块3级:+5.1。曲线半径：“边界半径”属性。|2065564|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/davidThomas/5qBSb/|1|https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius|2|https://developer.mozilla.org/en-US/docs/Web/CSS/|3|http://www.w3.org/TR/css3-background/#the-border-radius^0|0|0|0|B|0|0|A|7|L|3|10|3|0|0|0|D|0|D|1|I|D|2|0|0|V|3|0^^$0|@$1|2|3|4|5|6|7|19|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|1A|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|1B|8|@]|9|@$I|1C|J|1D|1|1E]]|A|$]]|$1|K|3|L|5|6|7|1F|8|@$I|1G|J|1H|M|N]|$I|1I|J|1J|M|N]|$I|1K|J|1L|M|N]]|9|@]|A|$]]|$1|O|3|P|5|6|7|1M|8|@]|9|@]|A|$]]|$1|Q|3|R|5|S|7|1N|8|@$I|1O|J|1P|M|N]]|9|@$I|1Q|J|1R|1|1S]|$I|1T|J|1U|1|1V]]|A|$]]|$1|T|3|U|5|S|7|1W|8|@]|9|@$I|1X|J|1Y|1|1Z]]|A|$]]|$1|V|3|-4|5|6|7|20|8|@]|9|@]|A|$]]]|W|$X|$5|Y|Z|10|A|$11|12]]|13|$5|Y|Z|10|A|$11|14]]|15|$5|Y|Z|10|A|$11|16]]|17|$5|Y|Z|10|A|$11|18]]]]

Yes, this is possible (albeit I've only tested in Chromium 28/Ubuntu 12.10):

<pre><code>div {
 /* this is the only relevant part: */
 border-radius: 20%/50%;

 /* this is irrelevant, and just so the element can be visualised/displayed: */
 width: 50%;
 height: 5em;
 margin: 2em auto;
 background-color: #000;
}
</code></pre>

<a href="http://jsfiddle.net/davidThomas/5qBSb/" rel="noreferrer">JS Fiddle demo</a>.

The important information is, obviously, the <code>20%/50%</code> property-value; the <code>20%</code> is the 'horizontal length' of the radius, whereas the <code>50%</code> is the 'vertical length'; using two different measurements gives an elliptical curve to the border, instead of a single measurement, which yields the more circular radius. Obviously this requires a certain amount of adjustment to your own requirements

References:

<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius" rel="noreferrer"><code>border-radius</code></a> (at <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/" rel="noreferrer">Mozilla Developer Network</a>).</li>
<li><a href="http://www.w3.org/TR/css3-background/#the-border-radius" rel="noreferrer">CSS Backgrounds and Borders Module Level 3: 5.1. Curve Radii: the ‘border-radius’ properties</a>.</li>
</ul>

blocks|key|988685|text|在许多浏览器(IE9%2B、FF、Chrome)上使用非常大的边框半径似乎是可行的，比如大卫的小提琴http://jsfiddle.net/cthQW/1/模式|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|988686|border-radius:+500px;|code-block|syntax|javascript|988687|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/cthQW/1/^0|1C|S|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

Applying a very large border radius seems to work on many browsers (IE9+, FF, Chrome) like this mod of David's fiddle <a href="http://jsfiddle.net/cthQW/1/" rel="noreferrer">http://jsfiddle.net/cthQW/1/</a>

<pre><code>border-radius: 500px;
</code></pre>

blocks|key|988720|text|如果使用百分比，则使用元素宽度来计算半径。要获得胶囊状元素，您需要传递给border-radius属性单元，如rem或px+(我不知道原因，但它有效)。这就是它在传递500+is+时工作的原因。如果需要，可以对line-height和border-radius属性使用相同的值。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|BOLD|entityRanges|data|988721|.capsule+{
++++line-height:+48px;
++++border-radius:+48px;
}|code-block|syntax|javascript|988722|这里有一个CodePen的例子。尝试更改变量$label-height，以查看按钮高度变化时形状是如何保持的。|988723|在本例中，不需要设置元素的宽度或高度。您只需调整内容的height和padding即可。|988724|填充属性对于设置内容和组件边框之间的分隔非常有用。如果我只设置左边的垫子，看它是什么样子。|988725|​|988726|📷|atomic|988727|988728|如果设置容器的line-height属性，则将自动设置容器高度，并同时将内容集中在容器内。|988729|如果要将组件的宽度设置为组件的内容宽度，可以将组件的显示属性设置为inline-block，并使用FlexBox将其安排在列中。然后，将左右边距设置为auto，以避免元素增长到其父宽度。|988730|988731|988732|988733|如果要在组件之间留出空间，则可以在连续组件之间设置margin-top属性。|988734|.capsule+%2B+.capsule+{
++++margin-top:+15px;
}|988735|希望它有帮助:)|988736|entityMap|0|LINK|mutability|MUTABLE|url|http://codepen.io/timbergus/pen/yYyvEb|1|IMAGE|IMMUTABLE|imageUrl|https://developer.qcloudimg.com/http-save/yehe-900000/48dbad4cdbbec5de60e048a847ab5a2e.png|imageAlt|2|https://developer.qcloudimg.com/http-save/yehe-900000/7b67b6a2d714b733d37c6b91713cdc5b.png^0|10|D|2X|B|39|D|1J|3|1N|2|2B|7|0|0|M|D|5|7|0|0|R|6|Y|7|0|0|0|0|1|1|0|0|7|B|0|X|C|0|0|0|1|2|0|0|P|A|0|0|0^^$0|@$1|2|3|4|5|6|7|1Q|8|@$9|1R|A|1S|B|C]|$9|1T|A|1U|B|C]|$9|1V|A|1W|B|C]|$9|1X|A|1Y|B|D]|$9|1Z|A|20|B|D]|$9|21|A|22|B|D]]|E|@]|F|$]]|$1|G|3|H|5|I|7|23|8|@]|E|@]|F|$J|K]]|$1|L|3|M|5|6|7|24|8|@$9|25|A|26|B|C]]|E|@$9|27|A|28|1|29]]|F|$]]|$1|N|3|O|5|6|7|2A|8|@$9|2B|A|2C|B|C]|$9|2D|A|2E|B|C]]|E|@]|F|$]]|$1|P|3|Q|5|6|7|2F|8|@]|E|@]|F|$]]|$1|R|3|S|5|6|7|2G|8|@]|E|@]|F|$]]|$1|T|3|U|5|V|7|2H|8|@]|E|@$9|2I|A|2J|1|2K]]|F|$]]|$1|W|3|S|5|6|7|2L|8|@]|E|@]|F|$]]|$1|X|3|Y|5|6|7|2M|8|@$9|2N|A|2O|B|C]]|E|@]|F|$]]|$1|Z|3|10|5|6|7|2P|8|@$9|2Q|A|2R|B|C]]|E|@]|F|$]]|$1|11|3|S|5|6|7|2S|8|@]|E|@]|F|$]]|$1|12|3|U|5|V|7|2T|8|@]|E|@$9|2U|A|2V|1|2W]]|F|$]]|$1|13|3|S|5|6|7|2X|8|@]|E|@]|F|$]]|$1|14|3|15|5|6|7|2Y|8|@$9|2Z|A|30|B|C]]|E|@]|F|$]]|$1|16|3|17|5|I|7|31|8|@]|E|@]|F|$J|K]]|$1|18|3|19|5|6|7|32|8|@]|E|@]|F|$]]|$1|1A|3|-4|5|6|7|33|8|@]|E|@]|F|$]]]|1B|$1C|$5|1D|1E|1F|F|$1G|1H]]|1I|$5|1J|1E|1K|F|$1L|1M|1N|-4]]|1O|$5|1J|1E|1K|F|$1L|1P|1N|-4]]]]

If you use percentages, it takes the element width to calculate the radius. To have the capsule-shaped element, you need to pass to the <code>border-radius</code> property units like rem or px (neither I know the reason for this, but it works). This is why it works when passing 500px. You can use the same value for <code>line-height</code> and <code>border-radius</code> properties if you want.

<pre><code>.capsule {
 line-height: 48px;
 border-radius: 48px;
}
</code></pre>

Here you have an example in <a href="http://codepen.io/timbergus/pen/yYyvEb" rel="noreferrer">CodePen</a>. Try to change the variable <code>$label-height</code> to see how the shape is maintained while the height of the button changes.

In this example, you don't need to set the width or height of the element. You just need to adjust the content's <code>height</code> and <code>padding</code>.

The padding property is useful to set a separation between the contents and the component border. See how it looks if I only set the left padding.

<a href="https://i.stack.imgur.com/TqPMH.png" rel="noreferrer"><img src="https://i.stack.imgur.com/TqPMH.png" alt="enter image description here"></a>

If you set the <code>line-height</code> property of the container, you will set automatically the container height, and center the content inside the container at the same time.

If you want to set the component's width to the component's content width, you can set the component's display property to <code>inline-block</code>, and use FlexBox to arrange them in a column, for example. And then, set the left and right margins to auto, to avoid the element to grow to its parent width.

<a href="https://i.stack.imgur.com/viYfX.png" rel="noreferrer"><img src="https://i.stack.imgur.com/viYfX.png" alt="enter image description here"></a>

And if you want to leave a space between the components, you can set the <code>margin-top</code> property between consecutive components.

<pre><code>.capsule + .capsule {
 margin-top: 15px;
}
</code></pre>

Hope it helps :)

blocks|key|70826|text|这就是我所发现的效果很好的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|70827|border-radius:+50vh;|offset|length|style|CODE|70828|浏览器支持现在看起来也不错。|70829|为了解释，vh是一个“视图端口单元”，它计算视图端口的高度(以像素为单位)。通过说50vh来声明边界半径，它就是50%25+*+(Viewport+Height)px。|BOLD|70830|entityMap^0|0|0|K|0|0|5|2|15|4|1K|P|R|2|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@$D|Q|E|R|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|S|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|T|8|@$D|U|E|V|F|G]|$D|W|E|X|F|G]|$D|Y|E|Z|F|G]|$D|10|E|11|F|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|N|$]]

This is what I have found to work well:

<code>border-radius: 50vh;</code>

Browser support looks good for that now too.

To explain, the <code>vh</code> is a "Viewport Unit" that computes the height of the viewport in pixels. By saying <code>50vh</code> to declare the border radius, it is <code>50% * (Viewport Height)px</code>.

blocks|key|71043|text|使用HTML可以很容易地实现这一点。你必须设置背景颜色和边框半径。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|71044|​|71045|span+{
++background-color:+#30bb36;
++border-radius:+10px;++
++padding-left:+10px;
++padding-right:+10px;
}|code-block|syntax|javascript|71046|<!DOCTYPE+html>
<html>
++<body>
++++Set+a+Background+Color+for+only+a+part+of+a+text.
++++One
++++Two
++++Three
++++Four
++</body>
</html>|71047|71048|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

This can be easily achieved using HTML Span. You have to just set the background-color and border-radius.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>span {
 background-color: #30bb36;
 border-radius: 10px; 
 padding-left: 10px;
 padding-right: 10px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
 &lt;body&gt;
 &lt;p&gt;Set a &lt;span&gt;Background Color&lt;/span&gt; for only a part of a text.&lt;/p&gt;
 &lt;span&gt;One&lt;/span&gt;
 &lt;span&gt;Two&lt;/span&gt;
 &lt;span&gt;Three&lt;/span&gt;
 &lt;span&gt;Four&lt;/span&gt;
 &lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>

Is it possible to make a capsule shape using border-radius without a set width or height?

I want the left and right sides to be completely rounded while the capsule would remain straight along it's horizontal length. Setting the radius to 50% doesn't seem to give the desired affect.

<img src="https://i.stack.imgur.com/xptlK.gif" alt="Capsule Shape">

Capsule shape using border-radius without a set width or height?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

是否有可能在没有固定宽度或高度的情况下，用边界半径制作胶囊形状？我希望左边和右边是完全圆形的，而胶囊将保持直线沿着它的水平长度。将半径设置为50%似乎没有达到预期的效果。​​

问胶囊形状使用边界半径没有固定的宽度或高度？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问胶囊形状使用边界半径没有固定的宽度或高度？EN