在此页

• 句法
• 插值
• 形式定义
• 形式句法
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

shape-outside CSS property defines a shape—which may be non-rectangular—around which adjacent inline content should wrap. By default, inline content wraps around its margin box; shape-outside provides a way to customize this wrapping, making it possible to wrap text around complex objects rather than simple boxes.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

句法

/* 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-outside: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z');
/* <url> value */
shape-outside: url(image.png);
/* <gradient> value */
shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px);
/* Global values */
shape-outside: initial;
shape-outside: inherit;
shape-outside: unset;
					

shape-outside property is specified using the values from the list below, which define the float area for float elements . The float area determines the shape around which inline content (float elements) wrap.

值

none

The float area is unaffected. Inline content wraps around the element's margin box, like usual.

<shape-box>

The float area is computed according to the shape of a float element's edges (as defined by the CSS box model ). This can be margin-box , border-box , padding-box ，或 content-box . The shape includes any curvature created by the border-radius property (behavior which is similar to background-clip ).

margin-box

Defines the shape enclosed by the outside margin edge. The corner radii of this shape are determined by the corresponding border-radius and margin values. If the border-radius / margin ratio is 1 or more, then the margin box corner radius is border-radius + margin . If the ratio is less than 1 , then the margin box corner radius is border-radius + (margin * (1 + (ratio-1)^3)) .

border-box

Defines the shape enclosed by the outside border edge. The shape follows the normal border radius shaping rules for the outside of the border.

padding-box

Defines the shape enclosed by the outside padding edge. The shape follows the normal border radius shaping rules for the inside of the border.

content-box

Defines the shape enclosed by the outside content edge. Each corner radius of this box is the larger of 0 or border-radius - border-width - padding .

<basic-shape>

The float area is computed based on the shape created by of one of inset() , circle() , ellipse() , polygon() , or as added in the level 2 specification path() . If a <shape-box> is also supplied, it defines the reference box for the <basic-shape> function. Otherwise, the reference box defaults to margin-box .

<image>

The float area is extracted and computed based on the alpha channel of the specified <image> as defined by shape-image-threshold .

注意： User agents must use the potentially CORS-enabled fetch method defined by the HTML5 specification for all URLs in a shape-outside value. When fetching, user agents must use "Anonymous" mode, set the referrer source to the stylesheet's URL, and set the origin to the URL of the containing document. If this results in network errors such that there is no valid fallback image, the effect is as if the value none had been specified.

插值

When animating between one <basic-shape> and a second, the rules below are applied. The values in the shape functions interpolate as a simple list. The list values interpolate as <length> , <percentage> ，或 calc() where possible. If list values are not one of those types but are identical (such as finding nonzero in the same list position in both lists), those values do interpolate.

• Both shapes must use the same reference box.
• If both shapes are the same type, that type is ellipse() or circle() , and none of the radii use the closest-side or farthest-side keywords, interpolate between each value in the shape functions.
• If both shapes are of type inset() , interpolate between each value in the shape functions.
• If both shapes are of type polygon() , both polygons have the same number of vertices, and use the same <fill-rule> , interpolate between each value in the shape functions.
• In all other cases no interpolation occurs.

形式定义

初始值	none
适用于	floats
继承	no
计算值	as defined for <basic-shape> (with <shape-box> following, if supplied), the <image> with its URI made absolute, otherwise as specified.
动画类型	yes, as specified for <basic-shape> , otherwise no

形式句法

none | <shape-box> || <basic-shape> | <image>
where 
<shape-box> = <box> | margin-box
<basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()> | <path()>
<image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>
where 
<box> = border-box | padding-box | content-box
<inset()> = inset( <length-percentage>{1,4} [ round <'border-radius'> ]? )
<circle()> = circle( [ <shape-radius> ]? [ at <position> ]? )
<ellipse()> = ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )
<polygon()> = polygon( <fill-rule>? , [ <length-percentage> <length-percentage> ]# )
<path()> = path( [ <fill-rule>, ]? <string> )
<image()> = image( <image-tags>? [ <image-src>? , <color>? ]! )
<image-set()> = image-set( <image-set-option># )
<element()> = element( <id-selector> )
<paint()> = paint( <ident>, <declaration-value>? )
<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )
<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>
where 
<length-percentage> = <length> | <percentage>
<shape-radius> = <length-percentage> | closest-side | farthest-side
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
<fill-rule> = nonzero | evenodd
<image-tags> = ltr | rtl
<image-src> = <url> | <string>
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
<image-set-option> = [ <image> | <string> ] <resolution>
<id-selector> = <hash-token>
<cf-mixing-image> = <percentage>? && <image>
<cf-final-image> = <image> | <color>
<linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )
where 
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )
<side-or-corner> = [ left | right ] || [ top | bottom ]
<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop>
<ending-shape> = circle | ellipse
<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}
<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]? ]# , <angular-color-stop>
where 
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
<linear-color-stop> = <color> <color-stop-length>?
<linear-color-hint> = <length-percentage>
<angular-color-stop> = <color> && <color-stop-angle>?
<angular-color-hint> = <angle-percentage>
where 
<color-stop-length> = <length-percentage>{1,2}
<color-stop-angle> = <angle-percentage>{1,2}
<angle-percentage> = <angle> | <percentage>
					

范例

Funneling text

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 {
  width: 40%;
  height: 12ex;
  background-color: lightgray;
}
.left {
  -webkit-shape-outside: polygon(0 0, 100% 100%, 0 100%);
  shape-outside: polygon(0 0, 100% 100%, 0 100%);
  float: left;
  -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.right {
  -webkit-shape-outside: polygon(100% 0, 100% 100%, 0 100%);
  shape-outside: polygon(100% 0, 100% 100%, 0 100%);
  float: right;
  -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
p {
  text-align: center;
}
					

结果

规范

规范	状态	注释
CSS Shapes Module Level 1 The definition of 'shape-outside' in that specification.	候选推荐	初始定义。
CSS Shapes Module Level 2 The definition of 'shape-outside' in that specification.	编者草案	添加 path() value

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
shape-outside	Chrome 完整支持 37	Edge 完整支持 79	Firefox 完整支持 62 完整支持 62 不支持 61 — 62 Disabled Disabled ). To change preferences in Firefox, visit	IE 不支持 No	Opera 完整支持 24	Safari 完整支持 10.1	WebView Android 完整支持 37	Chrome Android 完整支持 37	Firefox Android 完整支持 62 完整支持 62 不支持 61 — 62 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 完整支持 24	Safari iOS 完整支持 10.3	Samsung Internet Android 完整支持 3.0
circle()	Chrome 完整支持 37	Edge 完整支持 79	Firefox 完整支持 62 完整支持 62 不支持 61 — 62 Disabled Disabled ). To change preferences in Firefox, visit	IE 不支持 No	Opera 完整支持 24	Safari 完整支持 10.1	WebView Android 完整支持 37	Chrome Android 完整支持 37	Firefox Android 完整支持 62 完整支持 62 不支持 61 — 62 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 完整支持 24	Safari iOS 完整支持 10.3	Samsung Internet Android 完整支持 3.0
<gradient>	Chrome 完整支持 37	Edge 完整支持 79	Firefox 完整支持 62 完整支持 62 不支持 61 — 62 Disabled Disabled ). To change preferences in Firefox, visit	IE 不支持 No	Opera 完整支持 24	Safari 完整支持 10.1	WebView Android 完整支持 37	Chrome Android 完整支持 37	Firefox Android 完整支持 62 完整支持 62 不支持 61 — 62 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 完整支持 24	Safari iOS 完整支持 10.3	Samsung Internet Android 完整支持 3.0
<image>	Chrome 完整支持 37	Edge 完整支持 79	Firefox 完整支持 62 完整支持 62 不支持 61 — 62 Disabled Disabled ). To change preferences in Firefox, visit	IE 不支持 No	Opera 完整支持 24	Safari 完整支持 10.1	WebView Android 完整支持 37	Chrome Android 完整支持 37	Firefox Android 完整支持 62 完整支持 62 不支持 61 — 62 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 完整支持 24	Safari iOS 完整支持 10.3	Samsung Internet Android 完整支持 3.0
inset()	Chrome 完整支持 37	Edge 完整支持 79	Firefox 完整支持 62 完整支持 62 不支持 61 — 62 Disabled Disabled ). To change preferences in Firefox, visit	IE 不支持 No	Opera 完整支持 24	Safari 完整支持 10.1	WebView Android 完整支持 37	Chrome Android 完整支持 37	Firefox Android 完整支持 62 完整支持 62 不支持 61 — 62 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 完整支持 24	Safari iOS 完整支持 10.3	Samsung Internet Android 完整支持 3.0
polygon()	Chrome 完整支持 37	Edge 完整支持 79	Firefox 完整支持 62 完整支持 62 不支持 61 — 62 Disabled Disabled ). To change preferences in Firefox, visit	IE 不支持 No	Opera 完整支持 24	Safari 完整支持 10.1	WebView Android 完整支持 37	Chrome Android 完整支持 37	Firefox Android 完整支持 62 完整支持 62 不支持 61 — 62 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 完整支持 24	Safari iOS 完整支持 10.3	Samsung Internet Android 完整支持 3.0
Support for three-value syntax of position in circle and ellipse	Chrome 不支持 37 — 68	Edge 不支持 No	Firefox 不支持 62 — 70 不支持 62 — 70 不支持 61 — 62 Disabled Disabled ). To change preferences in Firefox, visit	IE 不支持 No	Opera 不支持 24 — 55	Safari 完整支持 10.1	WebView Android 不支持 37 — 68	Chrome Android 不支持 37 — 68	Firefox Android 完整支持 62 完整支持 62 不支持 61 — 62 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 不支持 24 — 48	Safari iOS 完整支持 10.3	Samsung Internet Android 不支持 3.0 — 10.0

图例

完整支持

完整支持

不支持

不支持

用户必须明确启用此特征。

用户必须明确启用此特征。

另请参阅

• CSS Shapes
• Overview of CSS Shapes
• Shapes from Box Values
• Basic Shapes
• Shapes from Images
• <basic-shape>
• shape-margin
• shape-image-threshold

元数据

• 最后修改： Jul 21, 2020

相关话题

1. CSS
2. CSS 参考
3. CSS Shapes
4. 指南

   1. Basic Shapes
   2. Overview of CSS Shapes
   3. Shapes From Images
   4. Shapes from box values
5. 特性

   1. <basic-shape>
   2. shape-image-threshold
   3. shape-margin
   4. shape-outside