蒴果形状使用边界半径没有设定的宽度或高度？

小开

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

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;
}

JS Fiddle demo.

The important information is, obviously, the 20%/50% property-value; the 20% is the 'horizontal length' of the radius, whereas the 50% 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:

小开

最佳答案

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

border-radius: 500px;

小开

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 border-radius 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 line-height and border-radius properties if you want.

.capsule {
line-height: 48px;
border-radius: 48px;
}

Here you have an example in CodePen. Try to change the variable $label-height 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 height and padding.

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.

If you set the line-height 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 inline-block, 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.

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

.capsule + .capsule {
margin-top: 15px;
}

Hope it helps :)

小开

This is what I have found to work well:

border-radius: 50vh;

Browser support looks good for that now too.

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

小开

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

span {
background-color: #30bb36;
border-radius: 10px;
padding-left: 10px;
padding-right: 10px;
}

<!DOCTYPE html>
<html>
<body>
<p>Set a <span>Background Color</span> for only a part of a text.</p>
<span>One</span>
<span>Two</span>
<span>Three</span>
<span>Four</span>
</body>
</html>