試一試
clip-path: ellipse(20px 50px);
clip-path: ellipse(4rem 50% at right center);
clip-path: ellipse(closest-side closest-side at 5rem 6rem);
clip-path: ellipse(closest-side farthest-side);
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element"></div>
</section>
#default-example {
background: #ffee99;
}
#example-element {
background: linear-gradient(to bottom right, #ff5522, #0055ff);
width: 100%;
height: 100%;
}
語法
css
shape-outside: ellipse(40% 50% at left);
shape-outside: ellipse(closest-side farthest-side at 30%);
橢圓本質上是一個被壓扁的圓形,因此 ellipse() 的作用方式與 circle() 非常相似,只不過我們需要指定兩個半徑 x 和 y。
值
<shape-radius>-
兩個半徑,按順序是 x 和 y。它們可以是
<length>、<percentage>,或者值closest-side和farthest-side。closest-side-
使用從形狀中心到參考框最近一側的長度。對於橢圓,這是半徑維度中最近的一側。
farthest-side-
使用從形狀中心到參考框最遠一側的長度。對於橢圓,這是半徑維度中最遠的一側。
<position>-
移動橢圓的中心。可以是
<length>、<percentage>,或者像left這樣的值。如果省略<position>值,則預設為 center。
正式語法
<ellipse()> =
ellipse( <radial-size>? [ at <position> ]? )
<radial-size> =
<radial-extent> |
<length [0,∞]> |
<length-percentage [0,∞]>{2}
<position> =
<position-one> |
<position-two> |
<position-four>
<radial-extent> =
closest-corner |
closest-side |
farthest-corner |
farthest-side
<length-percentage> =
<length> |
<percentage>
<position-one> =
left |
center |
right |
top |
bottom |
x-start |
x-end |
y-start |
y-end |
block-start |
block-end |
inline-start |
inline-end |
<length-percentage>
<position-two> =
[ left | center | right | x-start | x-end ] && [ top | center | bottom | y-start | y-end ] |
[ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ] |
[ block-start | center | block-end ] && [ inline-start | center | inline-end ] |
[ start | center | end ]{2}
<position-four> =
[ [ left | right | x-start | x-end ] <length-percentage> ] && [ [ top | bottom | y-start | y-end ] <length-percentage> ] |
[ [ block-start | block-end ] <length-percentage> ] && [ [ inline-start | inline-end ] <length-percentage> ] |
[ [ start | end ] <length-percentage> ]{2}
示例
基本 ellipse() 示例
此示例展示了一個左浮動的橢圓,其水平半徑為 40%,垂直半徑為 50%,並位於左側。這意味著橢圓的中心位於框的左邊緣,從而形成一個半橢圓形狀來環繞文字。點選程式碼塊中的“播放”以更改這些值,檢視橢圓如何變化
html
<div class="box">
<div class="shape"></div>
<p>
One November night in the year 1782, so the story runs, two brothers sat
over their winter fire in the little French town of Annonay, watching the
grey smoke-wreaths from the hearth curl up the wide chimney. Their names
were Stephen and Joseph Montgolfier, they were papermakers by trade, and
were noted as possessing thoughtful minds and a deep interest in all
scientific knowledge and new discovery. Before that night—a memorable night,
as it was to prove—hundreds of millions of people had watched the rising
smoke-wreaths of their fires without drawing any special inspiration from
the fact.
</p>
</div>
css
body {
font: 1.2em / 1.5 sans-serif;
}
.shape {
float: left;
shape-outside: ellipse(40% 50% at left);
margin: 20px;
width: 100px;
height: 200px;
}
使用 closest-side / farthest-side 值
關鍵字值 closest-side 和 farthest-side 有助於根據浮動元素參考框的大小快速建立橢圓。
html
<div class="box">
<div class="shape"></div>
<p>
One November night in the year 1782, so the story runs, two brothers sat
over their winter fire in the little French town of Annonay, watching the
grey smoke-wreaths from the hearth curl up the wide chimney. Their names
were Stephen and Joseph Montgolfier, they were papermakers by trade, and
were noted as possessing thoughtful minds and a deep interest in all
scientific knowledge and new discovery. Before that night—a memorable night,
as it was to prove—hundreds of millions of people had watched the rising
smoke-wreaths of their fires without drawing any special inspiration from
the fact.
</p>
</div>
css
body {
font: 1.2em / 1.5 sans-serif;
}
.shape {
float: left;
shape-outside: ellipse(closest-side farthest-side at 30%);
margin: 20px;
width: 100px;
height: 140px;
}
規範
| 規範 |
|---|
| CSS Shapes Module Level 1 # funcdef-basic-shape-ellipse |
瀏覽器相容性
載入中…
另見
- 使用此資料型別的屬性:
clip-path、shape-outside - 基本形狀指南