shape-outside
Baseline 廣泛可用 *
shape-outside CSS 屬性定義了一個形狀（可以是任意非矩形形狀），相鄰的行內內容將圍繞這個形狀進行環繞。預設情況下，行內內容會圍繞其外邊距框進行環繞；shape-outside 提供了一種自定義環繞方式的方法，使得文字可以圍繞複雜物件而不是矩形框進行環繞。
試一試
shape-outside: circle(50%);
shape-outside: ellipse(130px 140px at 20% 20%);
shape-outside: url("/shared-assets/images/examples/round-balloon.png");
shape-outside: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
<section class="default-example" id="default-example">
<div class="example-container">
<img
class="transition-all"
id="example-element"
src="/shared-assets/images/examples/round-balloon.png"
width="150" />
We had agreed, my companion and I, that I should call for him at his house,
after dinner, not later than eleven o’clock. This athletic young Frenchman
belongs to a small set of Parisian sportsmen, who have taken up “ballooning”
as a pastime. After having exhausted all the sensations that are to be found
in ordinary sports, even those of “automobiling” at a breakneck speed, the
members of the “Aéro Club” now seek in the air, where they indulge in all
kinds of daring feats, the nerve-racking excitement that they have ceased to
find on earth.
</div>
</section>
.example-container {
text-align: left;
padding: 20px;
}
#example-element {
float: left;
width: 150px;
margin: 20px;
}
語法
/* Keyword values */
shape-outside: none;
shape-outside: margin-box;
shape-outside: content-box;
shape-outside: border-box;
shape-outside: padding-box;
/* Function values */
shape-outside: circle();
shape-outside: ellipse();
shape-outside: inset(10px 10px 10px 10px);
shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);
/* Shape box with basic shape */
shape-outside: circle() border-box;
shape-outside: margin-box ellipse();
/* <url> value */
shape-outside: url("image.png");
/* <gradient> value */
shape-outside: linear-gradient(45deg, white 150px, red 150px);
/* Global values */
shape-outside: inherit;
shape-outside: initial;
shape-outside: revert;
shape-outside: revert-layer;
shape-outside: unset;
shape-outside 屬性使用以下列表中定義的值來指定，這些值定義了浮動元素的浮動區域。浮動區域決定了行內內容（浮動元素）環繞的形狀。
值
none-
浮動區域不受影響。行內內容像往常一樣圍繞元素的外邊距框進行環繞。
<shape-box>-
浮動區域根據浮動元素的邊緣形狀計算（由 CSS 盒模型定義）。這可以是
margin-box、border-box、padding-box或content-box。形狀包括由border-radius屬性建立的任何曲率（其行為類似於background-clip）。margin-box-
定義由外部外邊距邊緣包圍的形狀。此形狀的圓角由相應的
border-radius和margin值確定。如果border-radius / margin比率是1或更大，則外邊距框圓角半徑是border-radius + margin。如果比率小於1，則外邊距框圓角半徑是border-radius + (margin * (1 + (ratio - 1) ^ 3))。 border-box-
定義由外部邊框邊緣包圍的形狀。該形狀遵循正常的邊框外部圓角成形規則。
padding-box-
定義由外部內邊距邊緣包圍的形狀。該形狀遵循正常的邊框內部圓角成形規則。
content-box-
定義由外部內容邊緣包圍的形狀。此框的每個圓角半徑都是
0或border-radius - border-width - padding中的較大者。
<basic-shape>-
浮動區域根據由
inset()、circle()、ellipse()或polygon()函式建立的形狀進行計算；其他<basic-shape>函式無效。如果還提供了<shape-box>，它將定義<basic-shape>函式的參考框。否則，參考框預設為margin-box。 <image>-
浮動區域根據指定的
<image>的 alpha 通道進行提取和計算，如shape-image-threshold所定義。
注意：如果影像無效，其效果等同於指定了關鍵詞 none。此外，影像必須使用允許其使用的 CORS 頭部提供。
正式定義
| 初始值 | none |
|---|---|
| 應用於 | 浮動 |
| 繼承性 | 否 |
| 計算值 | 如 <basic-shape> 所定義（如果提供，後面跟著 shape-box），<image> 的 URI 變為絕對路徑，否則按指定。 |
| 動畫型別 | 是，如 <basic-shape> 所指定，否則否 |
正式語法
shape-outside =
none |
[ <basic-shape> || <shape-box> ] |
<image>
<shape-box> =
<visual-box> |
margin-box |
half-border-box
<image> =
<url> |
<image()> |
<image-set()> |
<cross-fade()> |
<element()> |
<gradient>
<visual-box> =
content-box |
padding-box |
border-box
<image()> =
image( <image-tags>? [ <image-src>? , <color>? ]! )
<image-set()> =
image-set( <image-set-option># )
<cross-fade()> =
cross-fade( <cf-image># )
<element()> =
element( <id-selector> )
<image-tags> =
ltr |
rtl
<image-src> =
<url> |
<string>
<image-set-option> =
[ <image> | <string> ] [ <resolution> || type( <string> ) ]?
<cf-image> =
[ <image> | <color> ] &&
<percentage [0,100]>?
<id-selector> =
<hash-token>
示例
文字匯聚
HTML
<div class="main">
<div class="left"></div>
<div class="right"></div>
<p>
Sometimes a web page's text content appears to be funneling your attention
towards a spot on the page to drive you to follow a particular link.
Sometimes you don't notice.
</p>
</div>
CSS
.main {
width: 530px;
}
.left,
.right {
background-color: lightgray;
height: 12ex;
width: 40%;
}
.left {
clip-path: polygon(0 0, 100% 100%, 0 100%);
float: left;
shape-outside: polygon(0 0, 100% 100%, 0 100%);
}
.right {
clip-path: polygon(100% 0, 100% 100%, 0 100%);
float: right;
shape-outside: polygon(100% 0, 100% 100%, 0 100%);
}
p {
text-align: center;
}
結果
規範
| 規範 |
|---|
| CSS Shapes Module Level 1 # shape-outside-property |
瀏覽器相容性
載入中…